HTML(Basic) Chapter6(Pink)定位
1.基础知识
1.1为什么需要定位技术
使用标准流以及浮动难以完成让盒子自由地在某个盒子内部移动位置或者固定在屏幕中的某个位置，并可以压住其他盒子1.2什么是定位
定位=定位模式+边偏移分为：静态定位、相对定位、绝对定位以及固定定位定位的方法
1.静态定位（元素默认）
选择器 { position: static;}
静态定位按照标准流的特性位置摆放，它没有边偏移静态定位在布局时候较少用到2.相对定位
选择器 { position: relative;}
自恋型定位是相对于它原来的位置来说的虽然这个盒子是走了的，但其位置还是保留，其他的盒子没有办法上升源代码（相对.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>Document</title> <style> .box1 { position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background-color: pink; } .box2 { width: 200px; height: 200px; background-color: deeppink; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
1234567891011121314151617181920212223242526272829303132最终效果
3.绝对定位
选择器 {position:absolute;}
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位即使页面缩放，也会随着缩放后的浏览器定位绝对定位的高度很高（比浮动要高），可以随意移动位置（脱标）源代码（绝对.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>Document</title> <style> .son { position: absolute; top: 100px; right: 200px; width: 200px; height: 200px; background-color: pink; } .father { width: 500px; height: 500px; background-color: skyblue; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
123456789101112131415161718192021222324252627282930313233最终效果
父亲没有加定位
父亲加了定位后
就近原则：跟最近的一级父元素的定位为准
4.固定定位
选择器 { position:fixed; }
以浏览器的可视窗口为参照点移动元素跟父元素没有啥关系固定定位不占有原来的位置固定定位还可以贴在我们版心的位置固定在板心右侧的算法
让盒子固定定位在left%50可以走到浏览器的可视区的一半的位置让固定定位的盒子margin-left走板心宽度一半的距离源代码（固定.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>Document</title> <style> .w { width: 800px; height: 1400px; background-color: pink; margin: 0 auto; } .fixed { position: fixed; /* 1.走浏览器宽度的一半 */ left: 50%; margin: 405px; width: 50px; height: 150px; background-color: skyblue; } </style> </head> <body> <div class="fixed"></div> <div class="w">版心盒子 800像素</div> </body> </html>
12345678910111213141516171819202122232425262728293031323334最终效果
5.子绝父相
孩子是绝对的，可以游来游去父元素必须要加上定位，但是不能加绝对定位（不占位置），使用相对定位就可以占有盒子，不影响页面的布局儿子元素使用绝对定位，父亲元素使用相对定位
6.粘性定位
定位的特点
以浏览器的可视窗口为参照的元素（固定定位特点）年薪定位占有原先的位置（相对定位的特点）必须添加上下左右当阶段的开发用的少源代码（粘性.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>Document</title> <style> body { height: 3000px; } .nav { /* 粘性定位 */ position: sticky; top: 0; width: 800px; height: 50px; background-color: pink; margin: 100px auto; } </style> </head> <body> <div class="nav">我是导航栏</div> </body> </html>
123456789101112131415161718192021222324252627282930最终结果
7.定位的叠放次序
选择器 { z-index: 1;}
数值可以是正整数、负数或0，默认是auto，数值越大，盒子越靠上（权值越大）只有定位的盒子才有属性数值权重后面不能够加单位如果属性值（权重）相同，则后来者居上<!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>Document</title> <style> .box { position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; } .xiongda { z-index: 1; background-color: red; } .xionger { z-index: 2; background-color: blue; left: 50px; top: 50px; } .guangtouqiang { background-color: green; left: 100px; top: 100px; } </style> </head> <body> <!-- 第三个盒子在上面（后来者居上） --> <div class="box xiongda">熊大</div> <div class="box xionger">熊二</div> <div class="box guangtouqiang">光头强</div> </body> </html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445最终效果
8.绝对定位的盒子水平居中
加了绝对定位的盒子是不能通过margin来进行水平居中的left先走50%在往回走盒子的宽的一半这个效果是动态的，会根据浏览器窗口的大小自动调节<!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>Document</title> <style> .box { position: absolute; width: 200px; height: 200px; background-color: pink; /* margin: auto; */ /* 1.left走50% */ left: 50%; /* 负值往左走自己盒子的宽度的一半 */ margin-left: -100px; top: 50%; margin-top: -100px; } </style> </head> <body> <div class="box"></div> </body> </html>
1234567891011121314151617181920212223242526272829303132最终效果
9.定位的特殊性
如果给行内元素加了定位，则行内元素（如span）则可以直接给width和height，与浮动类似加了定位以后，如果不给宽高，默认的宽高则默认是其内容的大小浮动的元素都不会触发内外边距合并的问题浮动的元素会压住下面的盒子，但是不会压住下面的文字；但是绝对定位和固定定位则会压住下面的标准流和文字因为浮动最初产生的目的是为了产生文字的环绕效果的，定位就会压住下面的文字写在最后
注:上述笔记均来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程 这一课程的学习记录，主要供自己的学习分享
各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！ ＜（＾－＾）＞
才疏学浅，若有纰漏，恳请斧正
本文章仅用于各位同志作为学习交流之用，不作任何商业用途，若涉及版权问题请速与作者联系，望悉知
相关知识
HTML(Basic) Chapter6(Pink)定位
使用美汤从HTML中提取特定的标题
用户登录界面设计代码html
【PINK婚礼课堂】花仙子主题婚礼
Visual Basic 6.0在花卉分类检索中的应用及开发实例.pdf
「PINK新娘课堂」花环造型推荐 让你秒变花仙子
基于草图的花开建模与动画
鲜花静态HTML网页作业作品 大学生鲜花网页设计制作成品 简单DIV CSS布局网站
HTML+CSS鲜花静态网页设计
HTML5期末大作业：鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码
网址: HTML(Basic) Chapter6(Pink)定位 https://m.huajiangbk.com/newsview104727.html
| 上一篇: 受益一生的45种思维方法 |
下一篇: JAVA编程艺术 |
