HTML中position的属性有哪几种

当我们使用HTML和CSS深入学习网页设计时，我们常常会使用position属性。position属性用于设置元素在文档中的位置。HTML网页中position属性有四种区别的属性值，它们分别是：

1.Static(默许值)

Static是position属性的默许值，如果没有进行其他属性值的定义，元素就会自动使用Static，这类情况下，网页元素会依照在文档流中的放置位置进行显现，而这类放置是没法使用top、bottom等进行调剂的。

2.Relative

Relative是一个有趣的属性，它允许网页设计人员调剂元素相对正常位置的位置。这意味着即便元素的位置相对文档中的其他元素产生了变化，但元素依然存在在文档流中。我们可使用top、bottom、left、right属性调剂元素的位置和使用z-index属性设置元素的层次关系。但是相当于移动元素位置后留下的空白，依然会让后续元素在本来位置显示，致使排版错乱。

3.Absolute

Absolute允许您完全脱离文档流，并根据其像素位置在页面上绝对位置。这类属性通经常使用于创建新的层，覆盖现有的层。如果添加一个absolute元素，它会从网页流中移除，让网页中的其他元素弥补它所在的位置。使用头部元素设置relative，以便在其内部寄存绝对元素。通过左、右、上、下属性，您可以控制元素的位置，并且可使用z-index属性将其移动到页面的前面或后面。

4.Fixed

当您需要在一个页面中转动时，使用Fixed属性就非常有用。Fixed属性和Absolute属性非常类似，但是它的位置是相对窗口而不是文档的位置。也就是说即便网页转动，Fixed属性也不会改变网页的位置。

总结

详细理解HTML中的position属性对CSS排版和创建美丽的网页相当重要。四种区别的属性值可让您自由地在网页上设置元素的位置和布局，可以实现丰富多样的页面效果。

桂#哥#网#络www.gUIgege.cn