盒子不同定位的解说！

目录一、相对定位二、绝对定位三、固定定位一、相对定位【概念】简单来说就是让一个元素相对于它自己原本应该在的位置进行移动。【核心特点】1.不脱离文档流这是相对定位最关键的特点。元素虽然移动了但是它原来占据的空间依然被保留不会影响周围其他元素的布局。你可以把它想象成“占着茅坑还乱动”。2.参照物是自身原位使用 top , right , bottom , left 属性调整位置时是相对于元素原本在文档流中的位置开始计算的。3.提升层级设置了相对定位的元素其显示层级会默认比普通元素高可以配合 z-index 属性来调整堆叠顺序。代码示例!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title相对定位/title style img { width: 100px; height: 100px; } /* 第一个图片 - 红色边框 - 演示未定位时的默认状态 */ #img1 { border: 4px red solid; /* 相对定位让元素相对于其原始位置进行定位 特点元素原本占据的文档流空间依然保留不会被其他元素占据 */ position: relative; /* left: 50px; 四个方向的偏移属性 - left: 正值向右负值向左 - right: 正值向左负值向右 - top: 正值向下负值向上 - bottom: 正值向上负值向下 注意偏移是相对于元素原来的位置而不是相对于父容器 */ /* top: -50px; */ /* left: 50px; */ } /* 第二个图片 - 绿色边框 - 演示相对定位 */ #img2 { border: 4px green solid; /* 相对定位相对于元素原本的位置进行偏移 */ position: relative; /* left: 50px; */ /* 重点说明即使盒子相对定位到别处很远其文档流位置依旧保留 也就是说虽然视觉上它移动了但原本占用的空间依然保留不动 后续元素不会填补这个空位 */ top: 150px; } /* 第三个图片 - 蓝色边框 - 演示未定位时的默认状态 */ #img3 { border: 4px blue solid; position: relative; /* left: -50px; */ /* top:-50px; */ } /style /head body !-- 三个演示用的图片使用不同的边框颜色区分 -- img src./img_src/photo1.jpg idimg1 img src./img_src/photo1.jpg idimg2 img src./img_src/photo1.jpg idimg3 /body /html二、绝对定位【概念】它是 CSS 定位中的一种它能让元素脱离正常的文档流并相对于其最近的已定位祖先元素进行定位。【核心特点】a.脱离文档流当一个元素设置了绝对定位它会“飘”起来不再占据原来在文档流中的位置。这会导致它覆盖在其他元素之上。 你可以把它想象成一张便利贴从文件堆里抽出来可以随意贴在文件上的任何地方。代码示例!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title绝对定位/title style /* 父容器 - 灰色背景 */ .container { width: 400px; height: 400px; background-color: gray; /* 绝对定位相对于最近的已定位配置了position属性上层元素定位 如果没有已定位的上层元素继续往上找则相对于浏览器窗口定位 */ position: absolute; left: 100px; /* 距离窗口左侧100px */ top: 100px; /* 距离窗口顶部100px */ } /* 第一个子元素 - 红色 */ #div1 { width: 100px; height: 100px; background-color: red; /* 绝对定位相对于已定位的祖先元素container定位 特点脱离文档流不保留原本的空间后续元素会填补空位 */ position: absolute; left: 50px; /* 相对于父容器左侧偏移20px */ top: 50px; /* 相对于父容器顶部偏移20px */ opacity: 0.75; /* 设置透明度0-1之间 */ } /* 第二个子元素 - 绿色 */ #div2 { width: 75px; height: 75px; background-color: green; position: absolute; left: 20px; top: 20px; } /* 第三个子元素 - 蓝色 */ #div3 { width: 50px; height: 50px; background-color: blue; /* 相对定位演示默认的文档流布局未开启绝对定位 */ /* position: absolute; */ /* left: 20px; */ /* top: 20px; */ } /style /head body !-- 父容器包裹三个子div -- div classcontainer !-- 红色div开启绝对定位脱离文档流 -- div iddiv1/div !-- 绿色div未开启定位遵循正常文档流布局 -- div iddiv2/div !-- 蓝色div未开启定位遵循正常文档流布局 -- div iddiv3/div /div /body /html三、固定定位【概念】是 CSS 中的一种定位方式它能让一个元素“钉”在浏览器窗口的某个位置即使页面滚动它的位置也保持不变。【核心特点】1.参照物是浏览器窗口元素的位置是相对于整个浏览器可视区域也叫视口来确定的而不是它的父元素或原来的位置。2.脱离文档流设置了固定定位的元素会完全脱离正常的页面布局流它原来的位置会被其他内容占据就像这个元素不存在一样。3.不随页面滚动这是它最直观的特点无论页面如何滚动元素都始终固定在窗口的指定位置。代码示例!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title固定定位/title style /* 通用样式所有div盒子 */ div { width: 250px; height: 250px; background-color: red; margin-bottom: 50px; /* 盒子之间的间距 */ } /* 第三个盒子 - 绿色 - 固定定位 */ #div3 { width: 200px; height: 200px; border-radius: 11px; /* 圆角边框 */ background-color: green; /* 固定定位相对于浏览器窗口定位 特点元素固定在窗口的指定位置滚动页面时位置不变 也会脱离文档流不保留原始空间 */ position: fixed; left: 100px; /* 距离窗口左侧100px */ top: 100px; /* 距离窗口顶部100px */ } /* 第五个盒子 - 橙色 - 固定定位 */ #div5 { width: 250px; height: 250px; border-radius: 22px; /* 圆角边框 */ background-color: orange; /* 固定定位相对于浏览器窗口定位 */ position: fixed; left: 150px; /* 距离窗口左侧150px */ top: 150px; /* 距离窗口顶部150px */ } /style /head body !-- 20个div盒子用于演示滚动效果 -- !-- 其中div3和div5使用固定定位滚动页面时它们会保持在屏幕固定位置 -- div盒子1/div div盒子2/div div iddiv3盒子3(固定定位)/div !-- 绿色固定在窗口左上角 -- div盒子4/div div iddiv5盒子5(固定定位)/div !-- 橙色固定在窗口 -- /body /html今天就学这么多吧下课全是干货哦~