srcmini本文概述
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。
通过绝对定位, 你可以将元素放置在页面上的任何位置。
<!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 | 用于设置元素的堆叠顺序。 | 数字自动继承 |
评论前必须登录！
注册