css - position的属性值absolute的问题
本文介绍了css - 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">
.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;来实现居中的。
这篇关于css - position的属性值absolute的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
