本文概述
- 1)CSS静态定位
- 2)CSS固定位置
- 3)CSS相对定位
- 4)CSS绝对定位
- 所有CSS位置属性
你可以使用top, bottom, left和right属性定位元素。只有先设置位置属性后, 才能使用这些属性。位置元素的计算位置属性是相对的, 绝对的, 固定的或粘滞的。
让我们看一下以下CSS定位:
- CSS静态定位
- CSS固定位置
- CSS相对定位
- CSS绝对定位
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 | 用于设置元素的堆叠顺序。 | 数字自动继承 |
推荐阅读
- CSS垂直对齐vertical-align
- CSS填充padding
- CSS溢出overflow
- CSS不透明度opacity
- CSS边距margin
- CSS行高line-height
- CSS字体
- CSS浮动float
- CSS显示HTML元素