CSS定位
标签：idt line text doc 原来 blog set tom 保留
6.定位
6.1 相对定位
6.2 绝对定位
6.3 z-index
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>默认情况</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #888; padding: 0; } #first{ background-color: lemonchiffon; border: 1px dashed #82881b; } #second{ background-color: #62ffbb; border: 1px dashed #258837; } #third{ background-color: #ff6452; border: 1px dashed #5d8dfc; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>6.1 相对定位
相对定位 ：position: relative
相对原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>相对定位</title> <!--相对定位 相对于自己原来的位置进行偏移 --> <style> body{ padding: 20px; } div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #888; padding: 0; } #first{ background-color: lemonchiffon; border: 1px dashed #82881b; position: relative; /* 相对定位*/ top: -20px; left:20px; } #second{ background-color: #62ffbb; border: 1px dashed #258837; } #third{ background-color: #ff6452; border: 1px dashed #5d8dfc; 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><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>方块定位</title> <style> #box{ width: 300px; height: 300px; padding: 10px; border: 2px solid #ff70e6; } a{ width: 100px; height: 100px; text-decoration: none; background: #258837; line-height: 100px; text-align: center; color: white; display:block; } a:hover{ background: #82881b; } .a2,.a4{ position: relative; left: 200px; top: -100px; } .a5{ position: relative; left: 100px; top: -300px; } </style> </head> <body> <div id="box"> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> <a href="#">链接4</a> <a href="#">链接5</a> </div> </body> </html>6.2绝对定位
1.定位 ：基于xxx定位 ，上下左右
没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级进行偏移
在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #888; padding: 0; position: relative; } #first{ background-color: lemonchiffon; border: 1px dashed #82881b; } #second{ background-color: #62ffbb; border: 1px dashed #258837; position: absolute; right: 30px; top: -10px; } #third{ background-color: #ff6452; border: 1px dashed #5d8dfc; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>6.3 固定定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>固定定位</title> <style> body{ height: 10000px; } div:nth-of-type(1){/*绝对定位：相对于浏览器*/ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){ /*fixed 固定定位*/ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0px; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html>6.4 z-index
像图层一样 一层叠一层
z-index：默认是0，最高无限制
opacity: 0.5%; /*背景透明度*/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>z-index</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="content"> <ul> <li><img src="image/2.png" ></li> <li> 学习</li> <li></li> <li>时间：2025-0-1</li> <li>地点</li> </ul> </div> </body> </html> CSS #content{ width: 380px; padding: 0px; margin: 0px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px #000000 solid; } ul,li{ padding: 0px; margin: 0px; list-style: none; } /*父级元素相对定位*/ #content ul{ position: relative; } .tipText,.tipBg{ position: absolute; width: 380px; height: 25px; top:216px; } .tipText{ color: black; /*z-index: 0;*/ } .tipBg{ background: #000000; opacity: 0.5%; /*背景透明度*/ filter: Alpha( opacity=50); /*IE8之前的版本支持 后面的不支持*/ }7 动画
转载https://www.cnblogs.com/xiaohuochai/p/5289143.html
标签：idt line text doc 原来 blog set tom 保留
原文地址：https://www.cnblogs.com/202116xi/p/14527480.html