HTML定位
Posted hzls
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML定位相关的知识，希望对你有一定的参考价值。
标签的隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div width: 100px; height: 100px; background-color: orange; border-radius: 50%; /*border-style: solid;*/ /*border-width: 1px;*/ /*border-color: red;*/ border: 1px solid red; background: url("img/001.png") no-repeat 0 0; font: normal 30px/100px ‘Arial‘; color: green; text-align: center; .d1:hover ~ .d2 display: block; .d2 /*不以任何方式显示，在页面中不占位，但重新显示，任然占位*/ display: none; .d3 /*修改盒子的透明度，值为0，完全透明，但在页面中占位*/ opacity: 0.5; /*显示和影藏都不占位，用来做一些标签的显示影藏切换*/ </style> </head> <body> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </body> </html>
盒子阴影
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div width: 100px; height: 100px; background-color: orange; margin: 100px auto; /*x轴偏移 y轴偏移 虚化程度 阴影宽度 颜色*/ box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green; </style> </head> <body> <div></div> </body> </html>
固定定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box /* 当前页面窗口的宽高(锁屏幕尺寸变化而变化)：vw vh */ height: 500vw; background-color: red; .tag width: 180px; height: 300px; background-color: orange; /*一旦打开定位属性，left、right、top、bottom四个方位词均能参与布局*/ /*固定定位参考浏览器窗口*/ /*布局依据：固定定位的盒子四边距浏览器窗口四边的距离：eg：left - 左距左，right - 右距右*/ /*左右取左，上下去上*/ position: fixed; left: 0; top: calc(50% - 150px); right: 50px; bottom: 20px; .flag width: 220px; height: 330px; background-color: pink; position: fixed; left: 0; top: calc(50% - 165px); .tag /*z-index值就是大于等于1的正整数，多个重叠图层通过z-index值决定上下图层显示先后*/ z-index: 666; .flag z-index: 888; </style> </head> <body> <div class="tag"></div> <div class="box"></div> <div class="flag"></div> </body> </html>
绝对定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box width: 300px; height: 300px; background-color: orange; margin: 100px auto 0; .s width: 100px; height: 100px; font: normal 20px/100px ‘Arial‘; text-align: center; .s1 background-color: red .s2 background-color: pink .s3 background-color: green .s /*绝对定位：子标签获取不到父级标签的宽，也撑不开父级的高*/ /*子标签必须自己设置宽高，父级也必须自己设置宽高*/ position: absolute; /*绝对定位的标签都是相对于一个参考系进行定位，直接不会相互影响*/ /*参考系：最近的定位父级*/ /*打开了四个定位方位*/ /*上距上...下距下*/ /*上下去上、左右取左*/ .box /*子级采用绝对定位，一般都是想参考父级进行定位，父级必须采用定位处理才能作为子级的参考系*/ /*父级可以选取 fixed、 absolute，但这两种定位都会影响盒模型，relative定位不会影响盒模型*/ /*父相子绝*/ position: relative; .s1 right: 0; left: 0; bottom: 0; z-index: 1; .s2 bottom: 50px; left: 0; z-index: 10; </style> </head> <body> <div class="box"> <div class="s s1">1</div> <div class="s s2">2</div> <div class="s s3">3</div> </div> </body> </html>
相对定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box width: 300px; height: 300px; background-color: orange; border: 1px solid black; .box /*margin-left: 100px;*/ /*margin-right: 100px;*/ /*margin-top: 100px;*/ .box /*相对定位偏移的是图层*/ position: relative; /*left: 100px;*/ /*right: 100px;*/ /*top: 100px;*/ /*bottom: 100px;*/ /*参考系：自身原有位置，且自身偏移不影响原有位置*/ p margin: 0; border: 1px solid black; </style> <style> .box margin: 10px 100px; position: absolute; </style> </head> <body> <div class="box">12345</div> <p>12345</p> </body> </html>
定位案例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body, ul, a margin: 0; padding: 0; list-style: none; text-decoration: none; </style> </head> <body> <style> .header width: 100vw; height: 50px; background-color: brown; .header li width: 150px; height: 50px; background-color: orange; float: left; margin-right: 10px; text-align: center; font: normal 20px/50px ‘Arial‘; .nav width: 100vw; height: 80px; background-color: tomato; .info width: 150px; height: 200px; background-color: pink; .header position: relative; .info position: absolute; left: 160px; top: 50px; display: none; .card:hover ~ .info display: block; </style> <ul class="header"> <li>首页</li> <li class="card">下载</li> <li>个人主页</li> <div class="info"></div> </ul> <div class="nav"></div> </body> </html>
定位案例2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .wrapper width: calc(200px * 5 + 40px); margin: 0 auto; border: 1px solid black; .wrapper:after content: ""; display: block; clear: both; .box width: 200px; height: 260px; background-color: orange; margin-right: 10px; margin-bottom: 10px; float: left; /*要不要辅助子级，父级都可以添加一个相对定位*/ position: relative; .box:nth-child(5n) margin-right: 0; .t, .b height: 125px; background-color: pink; .t margin-bottom: 10px; .b1 background: url("img/001.jpg") no-repeat; background-size: 200px 260px; .b2 div position: absolute; width: 50px; height: 30px; background-color: cyan; left: calc(50% - 25px); /*display: none;*/ .b2 img width: 150px; position: absolute; left: calc(50% - 75px); top: 50px; .b2 p position: absolute; background-color: brown; bottom: 10px; width: calc(100%); text-align: center; .b2 .f width: calc(100%); background-color: #ff6700; position: absolute; left: 0; bottom: 0; /*没有高度，也会显示文本，所以文本要隐藏*/ overflow: hidden; /*display: none;*/ height: 0; /*谁过渡谁有transition*/ transition: 0.2s; .box transition: 0.2s; top: 0; .b2:hover /*margin-top: -5px;*/ top: -5px; box-shadow: 0 0 5px 0 black; .b2:hover .f /*display: block;*/ height: 60px; </style> </head> <body> <div class="wrapper"> <div class="box b1"></div> <div class="box b2"> <div>新品</div> <img src="img/002.jpg"> <p>小米么么么么</p> <div class="f">1234567878</div> </div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"> <div class="t"></div> <div class="b"></div> </div> </div> </body> </html>
以上是关于HTML定位的主要内容，如果未能解决你的问题，请参考以下文章
HTML+CSS中关于绝对定位和相对定位定位的优缺点以及该注意的地方，现在最好的定位方式是怎么定位？
HTML中相对定位和绝对定位(absolute,relative)