为了账号安全,请及时绑定邮箱和手机立即绑定

position:relative和absolute的问题

position:relative和absolute的问题

慕粉4241372 2017-04-16 11:15:11
<html> <head> <style> .wrap{     background:#ccc;     float:left;     position:relative;     left:50%;     } .wrap-center{     position:absolute;     left:-50%; } </style> </head> <body> <div class="wrap">     <div class="wrap-center">我们来学习一下这种方法。</div> </div> </body> </html>在.wrap-center中,为何我设置为absolute后效果是这样的:而只能设置为relative后才能达到我想要的效果:
查看完整描述

3 回答

?
qq_青枣工作室_0

TA贡献446条经验 获得超754个赞

<html>
<head>
<style>
.wrap{
    background:#ccc;
    position:absolute;
    left:50%;
    }
.wrap-center{
    margin-left:-50%;
}
</style>
</head>
<body>
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>


查看完整回答
1 反对 回复 2017-04-16
  • 慕粉4241372
    慕粉4241372
    请问我使用你这个代码 把.wrap{}中块成relative就没效果了,这是为什么?
  • qq_青枣工作室_0
    qq_青枣工作室_0
    如果使用了float或position:absolute,div的宽度由其内容撑开,否则,默认会占满父元素。所以,你把absolute去掉并改为relative后,wrap div的宽度会占满body。此时,你再指定个width:300px,可以对比一下效果。
?
落叶1111

TA贡献57条经验 获得超9个赞

子元素绝对定位脱离标准文档流,不能撑开父元素。 

查看完整回答
反对 回复 2017-04-16
  • 3 回答
  • 0 关注
  • 1410 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信