第一个问题 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;来实现居中的。