HTML基础05-定位布局 定位position 概念：是一种布局方式，主要用来确定元素的位置。 作用 解决是具有层级叠加（覆盖）效果的布局。 实现方式 通过给元素添加position属性,并且定位位置调整都是配合left, top, right, bottom四个属性来 使用的。 position用来设置定位元素的参照物。 left, top, right, bottom用来设置定位元素相对于参照物横向和纵向距离。 #mark{ width: 100px; height: 100px; background-color: salmon; //设置定位的参照物 position: relative; //设置元素相对于参照物的横向和纵向距离 left: 100px; top: 50px; } position定位参照物的取值 relative 相对定位 特点:
前端6-定位布局
相对定位的元素会提升层级，但是不会脱离文档流,所以会为其保留位置。 相对定位是相对于元素自身原来的位置进行位置调整。 代码 <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title></title> <style type=\"text/css\"> *{ margin: 0; padding: 0; } /* 相对定位 测试!!!!!*/ #relative{ width: 100px; height: 100px; background-color: salmon; position: relative; left: 100px; top: 50px; } #two{ width: 150px; height: 150px; background-color: seagreen; } </style> </head> <body> <!-- relative 相对定位 a.不会脱离文档流 b.为其保留原始位置 c.移动的是相对自身位置进行移动 d.不会影响盒模型 --> <div id=\"relative\"></div> <div id=\"two\"></div> </body> </html> 浏览器效果
absolute 绝对定位 特点: 脱离文档流,所以不会为其保留位置。 实现 未设置position:absolute; <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title></title> <style type=\"text/css\"> *{ margin: 0; padding: 0; } #absolute { width: 100px; height: 100px; background-color: red; } #one { width: 150px; height: 150px; background-color: yellow; } </style> </head> <body> <div id=\"absolute\"></div> <div id=\"one\">这是标签one</div> </body> </html>
设置position:absolute; <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title></title> <style type=\"text/css\"> *{ margin: 0; padding: 0; } #absolute { width: 100px; height: 100px; background-color: red; position: absolute; left: 20px; top: 100px; } #one { width: 150px; height: 150px; background-color: yellow; } </style> </head> <body> <div id=\"absolute\"></div> <div id=\"one\">这是标签one</div> </body> </html> 浏览器效果
注意：绝对定位的定位参照物不一定是父级元素，如果想要让绝对定位的参照物为父级 元素，此时父级元素必需设置position为relative，absolute或者fixed。 父级元素未设置position时，默认以浏览器窗口为参考进行位置移动。 <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title></title> <style type=\"text/css\"> *{ margin: 0; padding: 0; } #absolute { width: 100px; height: 100px; background-color: red; position: absolute; left: 20px; top: 100px; } #one { width: 150px; height: 150px; background-color: yellow; } #a{ width: 350px; height: 300px; background-color: deeppink; } #b{ width: 250px; height: 250px; background-color: lightcoral; } #c{ width: 150px; height: 150px; background-color: deepskyblue; position: absolute; left: 30px;
top: 30px; } </style> </head> <body> <div id=\"absolute\"></div> <div id=\"one\">这是标签one</div> <div id=\"a\"> <div id=\"b\"> <div id=\"c\">这是设置了绝对定位的标签</div> </div> </div> </body> </html> 父级元素设置position时，此时以父级元素为定位参照物。 如果其父标签已经设置了除静态定位之外的其他定位，那么就以父标签为参 考进行位置移动。 <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title></title> <style type=\"text/css\"> *{ margin: 0; padding: 0;
} #absolute { width: 100px; height: 100px; background-color: red; position: absolute; left: 20px; top: 30px; } #one { width: 150px; height: 150px; background-color: yellow; } #a{ width: 350px; height: 300px; background-color: pink; padding: 30px; } //#b是#c的父级此时#c的选择器定位参照物为#b对应的 父级元素 #b{ width: 250px; height: 250px; background-color: greenyellow; position: relative; } #c{ width: 150px; height: 150px; background-color: deepskyblue; position: absolute; left: 30px; top: 30px; } </style> </head> <body> <div id=\"absolute\"></div> <div id=\"one\">这是标签one</div> <div id=\"a\">这是第b的父标签a <div id=\"b\">这是c的父标签b <div id=\"c\">这是设置了绝对定位的标签c</div> </div> </div> </body> </html>
如果多个相邻标签都设置绝对定位,层级如何显示? 绝对定位的元素会脱离文档流，提升层级。 相邻的标签都设置了绝对定位,越晚设置定位的层级越靠上。 <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title></title> <style type=\"text/css\"> *{ margin: 0; padding: 0; } /*兄弟标签 绝对定位*/ #div1 { width: 150px; height: 150px; background-color: yellowgreen; position: absolute; left: 10px; top: 10px; } #div2 {
width: 100px; height: 100px; background-color: yellow; position: absolute; left: 10px; top: 10px; } #div3 { width: 50px; height: 50px; background-color: green; position: absolute; left: 10px; top: 10px; } </style> </head> <body> <!--兄弟标签连续绝对定位 --> <div id=\"div1\">1111111</div> <div id=\"div2\">2222</div> <div id=\"div3\">333</div> </body> </html> z-index属性可以调整定位后标签的显示层级。默认z-index的值都为0;值越大，层级越 靠上。例如:给div2设置z-index:1; 那么div2就会在最上层显示。 #div2 { width: 100px; height: 100px; background-color: yellow; position: absolute; left: 10px; top: 10px; z-index: 2; }
fixed固定定位 设置固定定位之前的样式 特点:固定定位是相对于浏览器窗口进行位置调整,并且会脱离文档流.不会随着页面滚动而滚 动. <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title></title> <style type=\"text/css\"> *{ margin: 0; padding: 0; } body{
height: 3000px; } #fixed { width: 100px; height: 300px; background-color: sandybrown; position: fixed; left: 200px; top: 100px; } #one { width: 500px; height: 500px; background-color: skyblue; } </style> </head> <body> <div id=\"fixed\">这是一个设置了固定定位的div</div> <div id=\"one\">这是一个普通的div</div> </body> </html> 课堂综合练习 小米官网轮播图模块的定位效果:
代码在工程文件中; 超链接的四种状态 作用:用来修改超链接的访问状态. :link 该选择器能找到所有定义了超链接且没有被访问过的元素.只适用于a标签. :visited 该选择器能找到所有定义了超链接且已经被访问过的元素.只适用于a标签. :hover 该选择器能找到鼠标移动到其上面的元素.任意标签都适用. :active 该选择器能找到鼠标在其上面点击按下且不松开的元素.任意标签都适用. 注意:以上选择器,如果对同一个标签用了两个包含两个以上 就要遵循以下顺序来设置! link-visited-hover-active <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\" /> <title>伪类选择器</title> <style type=\"text/css\"> a { margin: 0 20px; } /*1. :link 该选择器能找到所有定义了超链接且没有被访问过的元素 只适用于a标签 */ a:link { color: deeppink; } /*2. :visited 该选择器能找到所有定义了超链接 且已经被访问过的元素 只适用于a 标签*/ a:visited { color: deepskyblue; } /*3. :hover 该选择器能找到鼠标移动到其上面的标签 任意标签都适用*/ a:hover { color: darkgreen; } /*4. :active 该选择器能找到鼠标在其上面点击按下且不松开的元素 任意标签都适用 */ a:active { color: red; } #one {
width: 200px; height: 200px; margin: 100px; background-color: skyblue; } #one:hover{ background-color: red; } #one:active{ background-color: #006400; } </style> </head> <body> <a href=\"http://www.jd.com\">京东</a> <a href=\"http://www.taobao.com\">淘宝</a> <a href=\"http://www.tianmao.com\">天猫</a> <a href=\"http://www.sohu.com\">搜狐</a> <a href=\"http://www.huaban.com\">百度</a> <div id=\"one\"></div> </body> </html> 课堂小结 熟练使用定位布局,并且能清楚的区分不同定位方式的区别 掌握提高定位后标签层级的方式 重点掌握绝对布局特点 了解伪类选择器
