优艾设计网

position的属性值absolute的问题?

第一个问题 position:absolute相对定位,定位对象是relative和fixed之间的区别。第二的问题 还有就是我分别设置了relative和fixed,在fixed替换成relative之后所设置的margin水平居中就失效了。
这是定为对象为relative的代码和效果图

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g优艾设计网_PS百科t; .box {width:500px; height:300px; border:1px solid red; margin:50px auto 0; position:relative; } .content {width:300px; height:150px; border:2px solid blue; background:#ccc; position:absolute; left:30px; top:50px; } </style> </head> <body> <div class="box"> <div class="content"> 绝对定位 </div> </div> </body> </html>

这是把父级框的position的属性relative替换为fixed之后的代码和效果图。

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box {width:500px; height:300px; border:1px solid red; margin:50px auto 0; position:fixed; } .content {width:300px; height:150px; border:2px solid blue; background:#ccc; position:absolute; left:30px; top:50px; } </style> </head> <body> <div class="box"> <div class="content"> 绝对定位 </div> </div> </body> </html>


吴函 11小时前

优艾设计网_平面设计

用了定位后,是不能通过magrin:0 auto;来实现居中的。


0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜