700字范文 > CSS元素的定位（相对定位绝对定位固定定位粘滞定位）

CSS元素的定位（相对定位绝对定位固定定位粘滞定位）

时间：2024-01-03 05:37:24

元素的定位

相对定位

当元素的position属性值设置为relative时则开启了元素的相对定位。

相对定位的特点：

1.元素开启相对定位以后，如果不设置偏移量元素不会发生改变。

2.相对定位是参照于元素在文档流中的位置进行定位的。

3.相对定位会提升元素的层级。

4.相对定位不会使元素脱离文档流。

5.相对定位不会改变元素的性质（块元素还是块元素，行内元素还是行内元素）

未使用相对定位

代码:

box2使用相对定位

代码：

position: relative;left: 200px;top:-200px;

box2相对于原来的位置向左边偏移200px，向上偏移200px（值为-200px）。

相对定位代码示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相对定位</title></head><style>*{margin: 0;padding: 0;}body{font-size: 60px;}.box1{width: 200px;height: 200px;background-color: #bfa; }.box2{width: 200px;height: 200px;background-color: orange; position: relative;left: 200px;top:-200px;}.box3{width: 200px;height: 200px;background-color: red; }</style><body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></body></html>

绝对定位

当元素的position属性值设置为absolute时，则开启了元素的绝对定位。

绝对定位的特点：

1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化。

2.开启绝对定位后，元素会从文档流中脱离。

3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开。

4.绝对定位会使元素提升一个层级。

5.绝对定位元素是相对于其包含块进行定位的。

包含块（ containing block ）- 正常情况下：包含块就是离当前元素最近的祖先块元素。- 绝对定位的包含块：包含块就是离它最近的开启了==定位的祖先元素。==如果所有的祖先元素都没有开启定位则根元素就是它的包含块。- html（根元素、初始包含块）

未使用绝对定位

元素依照原始文档流进行排序。

未使用绝对定位代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title></head><style>*{margin: 0;padding: 0;}body{font-size: 60px;}.box1{width: 200px;height: 200px;background-color: #bfa; }.box2-1{width: 200px;height: 200px;background-color: orange; }.box2-2{width: 200px;height: 200px;background-color: blue; }.box2-3{width: 200px;height: 200px;background-color: #abc; }.box3{width: 200px;height: 200px;background-color: red; }</style><body><div class="box1">1</div><div class="box2-1">2-1<div class="box2-2">2-2<div class="box2-3">2-3</div></div></div><div class="box3">3</div></body></html>

box2-3 没有最近的定位祖先元素则根据根元素html定位。

代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title></head><style>*{margin: 0;padding: 0;}body{font-size: 60px;}.box1{width: 200px;height: 200px;background-color: #bfa; }.box2-1{width: 200px;height: 200px;background-color: orange; }.box2-2{width: 200px;height: 200px;background-color: blue; }.box2-3{width: 200px;height: 200px;background-color: #abc;position: absolute;top: 0;left: 0;}.box3{width: 200px;height: 200px;background-color: red; }</style><body><div class="box1">1</div><div class="box2-1">2-1<div class="box2-2">2-2<div class="box2-3">2-3</div></div></div><div class="box3">3</div></body></html>

box2-3根据box2-2（具有相对定位的祖先元素）进行定位

代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title></head><style>*{margin: 0;padding: 0;}body{font-size: 60px;}.box1{width: 200px;height: 200px;background-color: #bfa; }.box2-1{width: 500px;height: 500px;background-color: orange;}.box2-2{width: 400px;height: 400px;background-color: blue; position: relative;}.box2-3{width: 300px;height: 300px;background-color: #abc;position: absolute;top: 0;left: 0;}.box3{width: 200px;height: 200px;background-color: red; }</style><body><div class="box1">1</div><div class="box2-1">2-1<div class="box2-2">2-2<div class="box2-3">2-3</div></div> </div><div class="box3">3</div></body></html>

固定定位

将元素的position属性设置为fixed则开启元素的固定定位。

固定定位永远参照于浏览器的视口进行定位。

将box3进行固定定位

代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定定位</title></head><style>*{margin: 0;padding: 0;}body{font-size: 60px;}.box1{width: 200px;height: 200px;background-color: #bfa; }.box2-1{width: 500px;height: 500px;background-color: orange;}.box2-2{width: 400px;height: 400px;background-color: blue; }.box2-3{width: 300px;height: 300px;background-color: #abc;}.box3{width: 200px;height: 200px;background-color: red;position: fixed;top: 50px;left: 50px; }</style><body><div class="box1">1</div><div class="box2-1">2-1<div class="box2-2">2-2<div class="box2-3">2-3</div></div> </div><div class="box3">3</div></body></html>

粘滞定位

当元素的postion属性设置为sticky时则开启了元素的粘滞定位。

粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定。

将box1进行粘滞定位

代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>粘滞定位</title></head><style>*{margin: 0;padding: 0;}body{font-size: 60px;height: 3000px;}.box1{width: 200px;height: 200px;background-color: #bfa;margin-top: 600px;position: sticky;top: 100px;}</style><body><div class="box1">1</div></body></html>

绝对定位的布局

水平居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位的布局</title></head><style>*{margin: 0;padding: 0;}body{font-size: 60px;}.box1{width: 600px;height: 600px;background-color: #bfa;position: relative;}.box2{width: 100px;height: 100px;background-color: red;position: absolute;right: 0;left: 0;margin-left: auto;margin-right: auto;}</style><body><div class="box1">1<div class="box2">2</div></div></body></html>

垂直居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位的布局</title></head><style>*{margin: 0;padding: 0;}body{font-size: 60px;}.box1{width: 600px;height: 600px;background-color: #bfa;position: relative;}.box2{width: 100px;height: 100px;background-color: red;position: absolute;top: 0;bottom: 0;margin-top: auto;margin-bottom: auto;}</style><body><div class="box1">1<div class="box2">2</div></div></body></html>

水平垂直居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位的布局</title></head><style>*{margin: 0;padding: 0;}body{font-size: 60px;}.box1{width: 600px;height: 600px;background-color: #bfa;position: relative;}.box2{width: 100px;height: 100px;background-color: red;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style><body><div class="box1">1<div class="box2">2</div></div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。