以下讨论的是和定位 绝对定位 相对定位 fixed static 相关的css基础教程之定位方法:绝对定位、相对定位、fixed和static教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:
1.绝对定位(absolute):脱离原来位置进行定位,可以使用left right top bottom进行定位
html代码
<!DOCTYPE html><html lang="en"><head> <meter charset="utf-8"> <title>hhhh</title> <link rel="stylesheet" type="text/css" href="lesson3.css"></head><body> <p class="demo"></p> <p class="box"></p></body></html>
css代码:
*{ margin:0; padding:0;}.demo{ position:absolute; /*top:100px; left:100px;*/ width: 100px; height: 100px; background-color: red; opacity: 0.5; /*透明度*/}.box{ width:150px; height:150px; background-color: green;}
2.相对定位(relative):保留原来位置进行定位,可以使用left right top bottom进行定位
html代码:
<!DOCTYPE html><html lang="en"><head> <meter charset="utf-8"> <title>hhhh</title> <link rel="stylesheet" type="text/css" href="lesson3.css"></head><body> <p class="demo"></p> <p class="box"></p></body></html>
css代码
*{ margin:0; padding:0;}.demo{ position:relative; /*top:100px; left:100px;*/ width: 100px; height: 100px; background-color: red; opacity: 0.5; /*透明度*/}.box{ width:150px; height:150px; background-color: green;}
3.fixed:相对于浏览器的窗口对元素进行定位,可以使用left right top bottom进行定位
4.static:默认值,没有定位,top left 等不起作用
<div class="wrapper"> <div class="demo"> <div class="box"></div> </div></div>
*{ margin:0; padding:0;}.wrapper{ margin-left: 100px; width: 200px; height: 200px; background-color: orange;}.demo{ position:relative; margin-left: 100px; width: 100px; height: 100px; background-color: red; }.box{ position:absolute; left: 50px; width:50px; height:50px; background-color: green;}
css基础教程之定位方法:绝对定位、相对定位、fixed和static文章就讲到这里,欢迎浏览本站的其它内容,点击这里返回首页
新闻热点
疑难解答