Question

如何将div放在另一张div之下？我所指的div是由id textual引用的，我希望它低于图片。这是 HTML和CSS：

#picture {
  position: absolute;
  top: 50%;
  left: 30%;
}

html {
  background-color: teal;
}

#textual {
  margin-top: 50px;
}

p {
  font-size: 30px;
}

<h1 class="text-center">Sir Isaac Newton</h1>
<div class="container-fluid" id="main">
  <div id="picture">
    <img id="newton" src="https://lh5.googleusercontent.com/4MW-UzVwXP-y7aJulVuUuyY-fxDZ0k5dBdzKBC-ScBfEXmbk7TwV_iTnESdThc6oKCjVuBviQIrot7A=w1570-h822"></img>
  </div>
  <div id="textual" style="text-align: center">
    <p>Sir Isaac Newton was a brilliant mathematician, astronomer, and physicist.
  </div>
</div>

Answer 1

在你的css中：

#picture {
 text-align:center;
}

的位置是：绝对的;顶部：50％;正在向下移动图片。

Answer 2

您在#picture div中使用绝对定位，这意味着它忽略了页面上“自然”定位的顺序。为了使图像显示在您想要的位置，请调整CSS以使您不使用绝对定位。例如，您可以将image和#textual div放在另一个用于定位内容的div中。

请务必研究CSS Box模型，以便更好地理解如何使用HTML和CSS优化元素定位。

Answer 3

你只需要添加position: relative，它应该可以正常工作。 http://jsfiddle.net/XELRX/136/

#picture {
  position: absolute;
  top: 50%;
  left: 30%;
}

html {
  background-color: teal;
}

#textual {
  margin-top: 50px;
}

p {
  font-size: 30px;
}

<h1 class="text-center">Sir Isaac Newton</h1>
<div class="container-fluid" id="main">
  <div id="picture">
    <img id="newton" src="https://lh5.googleusercontent.com/4MW-UzVwXP-y7aJulVuUuyY-fxDZ0k5dBdzKBC-ScBfEXmbk7TwV_iTnESdThc6oKCjVuBviQIrot7A=w1570-h822"></img>
  </div>
  <br>
  <div id="textual" style="text-align: center">
    <p>Sir Isaac Newton was a brilliant mathematician, astronomer, and physicist.
  </div>
</div>

Answer 4

使用文本div的相对位置并将其移除到图片div中，如下所示：

<style>
#picture {
  position: absolute;
  top: 50%;
  left: 30%;
}

html {
  background-color: teal;
}

#textual {
    position: relative;
    top: 50px;
    left: 0;
}

p {
  font-size: 30px;
}

</style>


<h1 class="text-center">Sir Isaac Newton</h1>
<div class="container-fluid" id="main">
  <div id="picture">
    <img id="newton" src="https://lh5.googleusercontent.com/4MW-UzVwXP-y7aJulVuUuyY-fxDZ0k5dBdzKBC-ScBfEXmbk7TwV_iTnESdThc6oKCjVuBviQIrot7A=w1570-h822"></img>
    <div id="textual" style="text-align: center">
    <p>Sir Isaac Newton was a brilliant mathematician, astronomer, and physicist.
  </div>
  </div>

</div>

将div放在另一个div下面

4 个答案: