搜索到
1
篇与
的结果
-
定位 5.1 相对定位<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <!--相对定位： 相对于自己原来的位置进行偏移 --> <style> body{ padding: 20px; } div{ margin: 10px; padding: 5px; font-size: 18px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; } #first{ background: #5f85ff; border: 1px dashed orange; position: relative; top: -10px; left: 20px; } #second{ background: #21D4FD; border: 1px dashed yellowgreen; } #third{ background: #ff23bd; border: 1px dashed limegreen; position: relative; bottom: -10px; right: 20px; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>相对定位：position: relative;相对于原来的位置，进行指定的偏移（它任然在标准文档流中，原来的位置会被保留） top: -10px; bottom: -10px; left: 20px; right: 20px;Demo：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 300px; height: 300px; padding: 10px; border: 1px solid red; } a{ width: 100px; height: 100px; text-decoration: none; background: lightblue; line-height: 100px; text-align: center; color: white; display: block; } a:hover{ background: lightsalmon; } .a2,.a4{ position: relative; left: 200px; top: -100px; } .a5{ position: relative; left: 100px; top: -300px; background: #5f85ff; } </style> </head> <body> <div id="box"> <a class="a1" href="#">链接1</a> <a class="a2" href="#">链接2</a> <a class="a3" href="#">链接3</a> <a class="a4" href="#">链接4</a> <a class="a5" href="#">链接5</a> </div> </body> </html>5.2 绝对定位基于xxx定位：上下左右1、在没有父级元素定位的情况下，相对于浏览器定位2、父级元素定位存在时，相对于父级元素进行偏移3、在父级元素范围内移动相对于父级或浏览器的位置进行指定偏移，绝对定位后，不在标准文档流中，原来的位置不被保留<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 18px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; position: relative; } #first{ background: #5f85ff; border: 1px dashed orange; } #second{ background: #21D4FD; border: 1px dashed yellowgreen; position: absolute; left: 2px; } #third{ background: #ff23bd; border: 1px dashed limegreen; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>5.3 固定定位<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1200px; } /*绝对定位：相对于浏览器*/ div:nth-of-type(1){ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; } /*fixed 固定定位*/ div:nth-of-type(2){ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html>5.4 z-index图层opacity: 0.5; 背景透明度#content{ width: 500px; padding: 0; margin: 0; overflow: hidden; font-size: 18px; line-height: 25px; border: 1px solid black; } ul,li{ padding: 0; margin: 0; list-style: none; } /*父级元素相对定位*/ #content ul{ position: relative; } .tipText,.tipBg{ position: absolute; width: 500px; height: 25px; top: 401px; } .tipText{ color: white; /*z-index: 999;*/ } .tipBg{ background: black; opacity: 0.5;/*背景透明度*/ filter: alpha(opacity=50);/*IE8及以前用filter代替opacity*/ }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="content"> <ul> <li><img src="image/bg.jpg" alt=""></li> <li class="tipText">强风吹拂！</li> <li class="tipBg"></li> <li>时间：16点31分</li> <li>地点：bilibili</li> </ul> </div> </body> </html>
