CSS位置position cssposition|CSS2

本文概述

1）CSS静态定位
2）CSS固定位置
3）CSS相对定位
4）CSS绝对定位
所有CSS位置属性

CSS position属性用于设置元素的位置。它还可用于将元素放置在另一个元素之后, 并且对于脚本化动画效果很有用。
你可以使用top, bottom, left和right属性定位元素。只有先设置位置属性后, 才能使用这些属性。位置元素的计算位置属性是相对的, 绝对的, 固定的或粘滞的。
让我们看一下以下CSS定位：

CSS静态定位
CSS固定位置
CSS相对定位
CSS绝对定位

1）CSS静态定位默认情况下, 这是HTML元素的位置。它始终根据页面的正常流程定位元素。它不受top, bottom, left和right属性的影响。
2）CSS固定位置fixed定位属性有助于将文本固定在浏览器上。此固定测试相对于浏览器窗口定位, 即使滚动窗口也不会移动。

< !DOCTYPE html> < html> < head> < style> p.pos_fixed { position: fixed; top: 50px; right: 5px; color: blue; } < /style> < /head> < body> < p> Some text...< /p> < p> Some text...< /p> < p> Some text...< /p> < p> ........< /p> < p> .... ...< /p > < p> ........< /p> < p> ........< /p> < p> ........< /p> < p> ........< /p> < p> ........ < /p> < p> ........< /p> < p> ........< /p> < p> ........< /p> < p> ........< /p> < p> ........< /p> < p> ........< /p> < p> Some text...< /p> < p> Some text...< /p> < p> Some text...< /p> < p class="pos_fixed"> This is the fix positioned text.< /p> < /body> < /html>

3）CSS相对定位相对定位属性用于相对于其正常位置设置元素。

< !DOCTYPE html> < html> < head> < style> h2.pos_left { position: relative; left: -30px; } h2.pos_right { position: relative; left: 30px; } < /style> < /head> < body> < h2> This is a heading with no position< /h2> < h2 class="pos_left"> This heading is positioned left according to its normal position< /h2> < h2 class="pos_right"> This heading is positioned right according to its normal position< /h2> < p> The style "left:-30px" subtracts 30 pixels from the element's original left position.< /p> < p> The style "left:30px" adds 30 pixels to the element's original left position.< /p> < /body> < /html>

4）CSS绝对定位绝对定位用于相对于具有非静态位置的第一父元素定位元素。如果找不到这样的元素, 则包含的块为HTML。
【CSS位置position】通过绝对定位, 你可以将元素放置在页面上的任何位置。

< !DOCTYPE html> < html> < head> < style> h2 { position: absolute; left: 150px; top: 250px; } < /style> < /head> < body> < h2> This heading has an absolute position< /h2> < p> The heading below is placed 150px from the left and 250px from the top of the page.< /p> < /body> < /html>

所有CSS位置属性

没有。	属性	描述	价值观
1)	bottom	用于设置定位框的底部边缘。	自动, 长度, ％, 继承
2)	clip	它用于剪切绝对定位的元素。	形状自动继承
3)	cursor	它用于指定要显示的光标的类型。	网址, 自动, 十字线, 默认, 指针, 移动, 电子调整大小, ne调整大小, nw调整大小, n调整大小, se调整大小, sw调整大小, s调整大小, w调整大小, 文本, 等待, 帮助
4)	left	它为定位的框设置左边缘。	自动, 长度, ％, 继承
5)	overflow	此属性用于定义如果内容溢出元素框会发生什么情况。	自动, 隐藏, 滚动, 可见, 继承
6)	position	用于指定元素的定位类型。	绝对, 固定, 相对, 静态, 继承
7)	right	用于设置定位框的右边距边缘。	自动, 长度, ％, 继承
8)	top	用于设置定位框的上边缘。	自动, 长度, ％, 继承
9)	z-index	用于设置元素的堆叠顺序。	数字自动继承