Question

对于非特定标题抱歉，问题有点难以解释。基本上，我有一个封装器div，它绝对定位在右边= 100％，它将它一直从屏幕向左移动。然后我在包装器中有一个名为“answer”的div，我想在屏幕上移回，所以我使用left = 100％。包装器“1”“2”和“3”中还有其他div，我使用脚本在屏幕上移回，但这并不重要。这是HTML：

<!DOCTYPE html>

<html>
    <head>
        <title>321 2.0</title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="1"></div>
            <div id="2"></div>
            <div id="3"></div>
            <div id="queue"></div>
            <div id="answer">
                <input id="field" type="text" name="answer">
                <button onclick="answer()">></button>
            </div>
            <script type="text/javascript" src="script.js"></script>
        </div>
    </body>
</html>

这是CSS：

body {
    margin: 0;
}

div {
    margin: 0;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

#wrapper {
    position: absolute;
    right: 100%;
    padding: 0;
}

#1 {
    background-color: #FFCCCC;
}

#2 {
    background-color: #DDDDDD;
}

#3 {
    background-color: #CCCCFF;
}

#queue {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -150px;
    margin-top: -150px;
    padding: 0;
}

#answer {
    margin: 0;
    padding: 0;
    left: 100%;
    background-color: #FFCCCC;
}

结果是一个空白屏幕，我期望这是因为包装器旨在将所有内容向左移动（#queue除外），除了我希望#answer由于左边停留在屏幕上：100％。我的猜测是问题是#answer是位置相对而不是绝对的，因为包装器在我进行绝对定位之前不会移出屏幕。但我讨厌这个问题，因为我需要包装器中的所有元素具有相对定位。什么给了什么？

Answer 1

关于相对/固定/绝对定位元素的

fmt.Printf: render.testStruct{S:"hello", V:(*map[string]int)(0x600dd065), I:42} render.Render: render.testStruct{S:"hello", V:(*map[string]int){"bar":1, "foo":0}, I:render.customType(42)} only applies。 left未指定#answer，因此为position。

这由static position: absolute;上的#answer修正：

#answer {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 100%;
    background-color: #FFCCCC;
}

包装器中的CSS百分比定位未按预期工作

1 个答案: