第一个问题 position:absolute相对定位,定位对象是relative和fixed之间的区别。第二的问题 还有就是我分别设置了relative和fixed,在fixed替换成relative之后所设置的margin水平居中就失效了。
这是定为对象为relative的代码和效果图
<!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: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>
用了定位后,是不能通过magrin:0 auto;来实现居中的。
一周热门 更多>