标签归档：position

在通常情况下浏览器会把设置的各DIV方框元素一起显示出来，并按顺序为它们定位。而position属性者打破了他们顺序定位使之可以让元素之间可以重叠显示。 position属性在旅游网站建设中我们经常用在图片上，比如在图片上再显示一个热卖之类的图片。就用position属性使两张图片重叠起来达到想要显示的效果。很多初学着会把position属性用对旅游网站框架的布局，这是一个很大的错误。 position属性与也有四个属性值，这四个属性值分别为：absolute、fixed、relative、static。在结合top、bottom、left和right这四个属性值可以让你重叠的图片显示在你想要的位置上。如果position属性设置为static，会应用常规的HTML/XHTML，布局和定位规则，并由浏览器决定元素的框的左边缘和上边缘。 要使元素相对于其包含的流移动，可以将position属性设置为relative。在这种情况下，top、bottom、left和right属性都用来计算框相对于其在流中正常位置所处的位置。 随后的元素都不会受到这种位置改变的影响，而且放在流中的方式就仿佛没有移动过该元素一样。将position属性设置为absolute，这样可以从包含文本流中去除元素，而且随后的元素可以相应地向前移动。然后使用top、bottom、left和right属性，相对于包含块计算出元素的位置。 这种定位允许将元素放在关于其包含元素的固定位置，但会随着包含元素的移动而移动。最后，将position属性设置为fixed，这样会把元素相对于其显示的页面或窗口进行定位。像absolute定位一样，从包含流中去除元素时，其他的元素也会相应发生移动。 top、bottom、left和right属性都用来设置元素相对于包含窗口或页面所处的位置。请注意，对于持续进行的媒体而言(像滚动的浏览器显示)，元素只在所需的位置上显示一次。 对于打印媒体来说，元素打印在每个页面指定的位置上。 可以使用fixed定义将标题和角注放在浏览器窗口的上部和底部，或者放在每个打印好的页面的上边和下边。top、bottom、left和right属性都接受长度或百分比值。 当position属性设置为relative时，百分比是以元素框的大小为根据的。当position设置为absolut或fixed时，百分比则以包含元素的框的大小为依据。在使用长度值时，它们指定了从元素的包含框对应的边缘开始的偏移量。 例如，要定位一个其底部在浏览器窗口(或者打印的页面)底部上方1厘米处的元素，会把position属性设置为fixed，并将bottom属性设置为1cm。