css中定位问题:绝对定位、相对定位、fixed和static
程序员文章站
2022-03-28 16:46:00
...
本篇文章给大家带来的内容是关于css中定位问题:绝对定位、相对定位、fixed和static,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
absolute: 相对于最近的有定位的父级进行定位,要是没有最就相对文档进行定位
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; }
没有使用opsition定位时效果(p元素是块级元素,独占一行)
加上定位,没有设置top left 时效果(此时demo和box不在同一层面)
加上top left效果
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; }
没有使用opsition定位时
使用opsition定位 不加top left 时
使用opsition定位 加上top left 时(保留红色原来的位置进行定位,上方有空出原来红色的部分)
3.fixed:相对于浏览器的窗口对元素进行定位,可以使用left right top bottom进行定位
4.static:默认值,没有定位,top left 等不起作用
注意:存在父子元素使用定位时
absolute: 相对于最近的有定位的父级进行定位,要是没有最就相对文档进行定位
relative:相对于自己原来的位置进行定位
通常情况下,我们使用relative作为参照物,使用absolute进行定位
例如:
<div class="wrapper"> <div class="demo"> <div class="box"></div> </div> </div>
若使box参照demo进行定位则
*{ 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的详细内容,更多请关注其它相关文章!
上一篇: 用JavaScript绘图 ——JS2D函数集_javascript技巧
下一篇: HTML5éè¿è°ç¨canvas对象çgetContext()æ¹æ³æ¥è·åç»å¾ç¯å¢_html5æç¨æå·§
推荐阅读
-
html/css中相对定位relative和绝对定位absolute的用法
-
绝对定位和浮动的问题,求大神帮忙解决_html/css_WEB-ITnose
-
CSS中的绝对定位与相对定位详细介绍
-
CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位_html/css_WEB-ITnose
-
详解CSS的相对定位和绝对定位
-
div+css 绝对定位和相对定位_html/css_WEB-ITnose
-
CSS父子DIV绝对定位和相对定位的位置关系是怎样的?_html/css_WEB-ITnose
-
CSS定位问题(3):相对定位,绝对定位_html/css_WEB-ITnose
-
CSS定位问题(3):相对定位,绝对定位_html/css_WEB-ITnose
-
css相对定位和绝对定位的对比介绍