Day03 Css的学习定位
定位（Positioning） 属性
CSS position 属性
第一 position: fixed 固定定位的学习:
<div id="four"> fixed 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 </div>
#four{ position: fixed; right: 0px; }
运行结果观察:
思考一下当我改变right的值会发生什么变化呀
网right走了80px盒子向left运动
自己思考一下
第二· position: absolute; 绝对定位
<div id="one"> 我的二个盒子绝对定位 这个元素向上119px向左为0px </div>
#one { border: 4px dotted forestgree background-color: rgb(224, 24 color: rgb(237, 14, 14); position: absolute; top: 0px; font-size: 20px; }
思考一下当我改变top的值会发生什么变化呀
绝对定位负数为向上运动 正数向下运动
第三 position: relative;相对定位
#two { border: 5px solid rgb(28, 28, background-color: rgb(13, 255, color: rgb(255, 255, 255); position: relative; font-size: 20px; right: 0px; bottom: -100px; }
思考一下当我改变right的值为负数会发生什么变化呀
相对于红色框绿色的div向right运动
第四 position: sticky;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript中文网(javascriptcn.com)</title> <style> div.sticky { /* position: -webkit-sticky; */ position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style> </head> <body> <div class="sticky">我是粘性定位!</div> <div style="padding-bottom:2000px"> <p>滚动我</p> <p>来回滚动我</p> <p>滚动我</p> <p>来回滚动我</p> <p>滚动我</p> <p>来回滚动我</p> </div> </body> </html>
第五个 position: static;
<!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>定位的学习Position</title> <style> body { padding: 0px; margin: 0px; border: 2px solid red; } div { background-color: aliceblue; height: 200px; width: 800px; border: 3px solid rgb(14, 165, 165); text-align: center; line-height: 200px; /* 超过了盒子的范围隐藏 */ overflow: hidden; position: static; top: 119px; /* left: 0px; */ } #one { border: 4px dotted forestgreen; background-color: rgb(224, 244, 207); color: rgb(237, 14, 14); position: absolute; /* top: 0px; */ font-size: 20px; } #two { border: 5px solid rgb(28, 28, 28); background-color: rgb(13, 255, 0); color: rgb(255, 255, 255); position: relative; font-size: 20px; right: 0px; bottom: -100px; } #three{ position: sticky; top: 6.25rem; } #four{ position: fixed; top: 100px; } </style> </head> <body> <!-- static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 --> <div> static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） </div> <!-- absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 --> <div id="one"> 我的二个盒子绝对定位 这个元素向上119px向左为0px </div> <!-- 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 --> <div id="two"> 我的第三盒子相对定位 </div> <!-- sticky --> <!-- 粘性定位，该定位基于用户滚动的位置。 --> <!-- --> <!-- 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置 --> <div id="three"> sticky 粘性定位，该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置 </div> <!-- --> <!-- fixed 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 --> <div id="four"> fixed 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 </div> <!-- --> </body> </html>
整体的运行效果
自己思考上面的图如何实现
