猿问

position:relative和absolute的问题

<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后才能达到我想要的效果:

http://img.mukewang.com/58f2e1a50001d19c03210041.jpg


慕粉4241372
浏览 1435回答 3
3回答

qq_青枣工作室_0

<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>

落叶1111

子元素绝对定位脱离标准文档流,不能撑开父元素。 
随时随地看视频慕课网APP
我要回答