CSS位置position

本文概述

  • 1)CSS静态定位
  • 2)CSS固定位置
  • 3)CSS相对定位
  • 4)CSS绝对定位
  • 所有CSS位置属性
CSS position属性用于设置元素的位置。它还可用于将元素放置在另一个元素之后, 并且对于脚本化动画效果很有用。
你可以使用top, bottom, left和right属性定位元素。只有先设置位置属性后, 才能使用这些属性。位置元素的计算位置属性是相对的, 绝对的, 固定的或粘滞的。
让我们看一下以下CSS定位:
  1. CSS静态定位
  2. CSS固定位置
  3. CSS相对定位
  4. 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 用于设置元素的堆叠顺序。 数字自动继承

    推荐阅读