目录

  • 元素的定位
    • 相对定位
    • 绝对定位
    • 固定定位
    • 粘滞定位
    • 绝对定位的布局

元素的定位

相对定位

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

  • 相对定位的特点：
    1.元素开启相对定位以后，如果不设置偏移量元素不会发生改变。
    2.相对定位是参照于元素在文档流中的位置进行定位的。
    3.相对定位会提升元素的层级。
    4.相对定位不会使元素脱离文档流。
    5.相对定位不会改变元素的性质（块元素还是块元素，行内元素还是行内元素）

  • 未使用相对定位

    代码:

<!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;        }.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>
  • 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>

CSS元素的定位（相对定位、绝对定位、固定定位、粘滞定位）相关推荐

  1. 定位详解（固定定位，粘滞定位）

    固定定位: 固定定位是绝对定位的一种特殊形式,类似于 正方形是一个特殊的 矩形.它以浏览器窗口作为参照物来定义网页元素.当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位. ...

  2. 相对定位绝对定位固定定位元素的层级

    相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景 相对定位 <!DOCTYPE html> <html lang="e ...

  3. CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位

    目录 1.定位布局  1.1.静态定位( Static positioning) 简单代码实现:  - 1.2.什么是相对定位?( Relative positioning ) 简单代码实现: - 1 ...

  4. 相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法

    相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法 一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...

  5. 定位：相对定位，绝对定位，固定定位，粘滞定位（巨详细）

    一.相对定位 (1)布局:文档流,margin,浮动,定位···· 定位:一种高级的布局的方式.你可以将任何的元素,放在页面任意的位置 学习定位:如何开启,开启后特点 position样式名, 可选值 ...

  6. CSS布局相关知识（四）：定位（相对、绝对、固定、粘滞）、层级

    一.定位 position 定位是什么: 定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置 怎么设置定位: 使用position属性来设置定位,可选值: static 默认值,元素 ...

  7. CSS之定位（粘滞定位）

    粘滞定位: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...

  8. 定位的开启及特点（固定定位和粘滞定位）

    目录 一.固定定位 1.固定定位的开启 2.固定定位的特点 3.固定定位的应用场景 二.粘滞定位 (一般用于页面导航的吸顶效果) 1.粘滞定位的开启 2.粘滞定位的特点 一.固定定位 1.固定定位的开 ...

  9. 04.粘滞定位.html

    <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...

最新文章

  1. 如何用sqlyog实现远程连接mysql
  2. 流氓ONU问题分析和处理
  3. 外贸电子商务软件必须提供的SEO特性
  4. AnalyserNode
  5. vb6如何判断文件是否存在_使用boost.filesystem检查文件是否存在的正确姿势
  6. 如何使用pass语句？
  7. 智能机器人语音识别技术
  8. Spring Bean 作用域
  9. 淘宝、天猫按关键词搜索商品API接口返回数据展示
  10. 计算机里的文件弄不到桌面怎么办,电脑文件夹在桌面不显示怎么办
  11. 上帝视角-我是一个线程『转』
  12. Unity3d 给人物模型添加动画
  13. 马虎词汇教程31-35(转载)
  14. Elasticsearch数据库all shards failed
  15. cmd命令netstat -ano不是内部命令解决方案
  16. Mac—删除默认英文输入法
  17. 小程序 底部按钮兼容 iPhone X（解决底部横杠遮挡问题）
  18. 表单提交-form提交和ajax提交
  19. MySQl 面试重点_2.常见的索引面试题总结
  20. 基于树莓派CM4的三千兆+USB3.0扩展板硬件介绍

热门文章

  1. 古人把“年龄的代称”说的如此醉人，你了解多少？
  2. ios动画-新浪微博app点击发微博按钮动画的实现
  3. Cadence allegro 显示、隐藏、调整和修改器件丝印
  4. Part I 空气曲棍球 Chapter4 (4.1 Smooth Shading）
  5. 给星座图加颜色 matlab和python
  6. SQL SERVER2019 安装程序无法与下载服务器联系。无法安装机器学习服务的问题解决方式
  7. 【社区榜单】TensorFlow 社区双周问答贡献光荣榜（第二期）
  8. 《精神与爱欲》爱源于母性，且超越性别
  9. TYD_初识python数据可视化库-Matplotlib
  10. 学生管理系统 前后端分离项目【简约版】