【body段落怎么定位】指定CSS位置，CSS的职位属性实例说明

版面的核心是位置属性，您可以将此属性应用于元素框，从而相对于其在常规文档流中的位置更改位置。Position属性有四个值：static、relative、absolute和fixed。默认值为static。

Static :基本文档流，普通显示器；Relative:相对位置：Absolute:绝对定位；固定位置：指定固定位置。

HTML代码：

！DOCTYPE html

Html

头(电影)

meta charset=' utf-8 '

标题定位/标题

script type=' text/JavaScript ' src=' demo . js '/script

link rel=' style sheet ' type=' text/CSS ' href=' demo . CSS '

/head

菩提

P1/p

P id='p2'2/p

P3/p

P4/p

/body

/html

Css:

* {

margin : 0；

padding : 0；

}

P{

Position: static:

Background: # ccc

Margin-bottom: 15px:

}

#p2{

Position:relative:

top : 20px；

Left: 20px:

}

1将第二个p元素position属性设置为(绝对位置)relative，并设置top和left值。

图标：

找到：第二段相对于原始位置向右移动20px以下。

结论：绝对定位元素相对于文档流中的原始基本位置发生变化。而且，这个元素不影响其他元素，只是根据自己原来的位置改变了。

通过为top和left属性设置负值，PS:可以向上和向左移动元素。

2将第二个p元素position的属性更改为absolute(相对位置)，然后设置top和left值。

图标：

找到：第二段相对于浏览器窗口的底部和右侧移动20px。而且原来的位置被占领了。

结论：相对位置基本上以body为参照。而且相对定位偏离了文档流，Margin-Bottom 3360 15px。失效。

如果在PS:父元素的位置属性中设置了relative，则使用父元素作为引用。如果没有父元素，请检查父元素的父元素是否存在，否则使用body作为引用。

3将第二个段落职位的属性更改为固定位置，然后设置top和left值。

类似于绝对定位。实际上，“固定”意味着body的固定位置不会随着页面滚动而变化。