Question

如果子元素的宽度是绝对的（它还有margin-left从父元素中移出元素）并且父元素是相对的，那么如何使子元素的宽度监听父元素的宽度。

这是代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">

    section{
        width: 50%;
        height: 100px;
        background: gray;
        position: relative;
    }

    div{
        width: 100%;
        height: 50px;
        margin-left: 10%;
        background: red;
        position: absolute;
    }



    </style>
</head>
<body>

<section>
    <div></div>
</section>


</body>
</html>

感谢您阅读我的问题。

Answer 1

将margin-left:10%替换为left:10%，将right:0设置为“锚定”相对父级另一侧的元素，然后将width设置为{ {1}}（resp。删除auto，然后width:100%将成为默认设置。

＆＃13;

auto

＆＃13;

section {
    position: relative;
    width: 50%;
    height: 100px;
    background: gray;
}
div {
    position: absolute;
    left: 10%;
    right:0;
    height: 50px;
    background: red;
}

＆＃13;

Answer 2

如果我理解正确，你应该使用溢出。

section{
        width: 50%;
        height: 100px;
        background: gray;
        position: relative;
        overflow: hidden;
    }

这将阻止孩子过度运行父母。

如何定位：即使绝对有保证金，绝对听父母相对元素？

2 个答案: