Question

我会尽力解释这个问题。我用代码创造了一个小提琴。 https://jsfiddle.net/caoz7sn2/

我正在尝试在我完成的div之上放置一个div，但问题是当你调整屏幕大小时，position:absolute的div与其他显然没有明显相反因为它是绝对的。

<!DOCTYPE html>
<html>
<head>
    <title>404Vanity</title>
    <script src="http://localhost:35729/livereload.js"></script>
</head>
<body>

    <div class="header">
        <img class="logo" src="images/logo.svg">

        <div class="navbar">
            <ul>
                <li><a href="work">Work</a></li>
                <li><a href="vision">Vision</a> </li>
                <li><a href="contact">Contact</a> </li>
            </ul>
        </div>

        <div class="goldbar"></div>
    </div>




    <div class="itemList">
        <div class="item">
            <img src="images/shopashop.png">
            <div class="overlay"></div>
            <div class="title"><h2>Shopashop</h2></div>
        </div>
    </div>

<script src="bundle.js"></script>
</body>
</html>

假设div class="itemList"正好位于金条div的顶部。

Answer 1

我不太确定这是不是你想要的。但是div没有正确排队的原因是因为金条有这个余量：0自动。这告诉它始终保持在页面的中心位置。

然后你有了你的.itemlist，无论浏览器的宽度如何，都被告知它始终位于页面左侧30％的位置。

如果您尝试将项目列表放在中心位置，我会对绝对元素执行{{1}}。小提琴：https://jsfiddle.net/caoz7sn2/2/

绝对div位于div

1 个答案: