子 div 绝对位置与父级不相关答案

【问题标题】：Child div absolute position is not relative to parent子 div 绝对位置与父级不相关
【发布时间】：2019-09-07 19:03:15
【问题描述】：

我使用bootstrap 作为我的CSS 框架。我的HTML 代码如下：

.home-image {
  position: relative;
}

.photography {
  position: absolute;
}

.image-text_left {
  /*display:none;*/
  position: absolute;
  width: 300px;
  top: 200px;
  ;
  left: 200px;
  z-index: 100;
  font-weight: bold
}

<div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">Contact Me</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
  </div>
</div>

<div class="container">
  <!-- Example row of columns -->
  <div class="row">
    <div class="span7">
      <div class="home-image">
        <img class="photography" src="http://placehold.it/700x400" />
      </div>
      <p class="image-text_left">Fashion Photography</p>
      <h5>Heading</h5>
    </div>
    <div class="span5">
      <div class="home-image">
        <img class="photography" src="http://placehold.it/400x200" />
      </div>
      <div class="home-image below">
        <img class="photography" src="http://placehold.it/400x200" />
      </div>
      <p class="image-text_right-top">Fashion Photography</p>
      <h5>Heading</h5>
    </div>

但是，正如我在问题中所说，.image-text_left 类相对于父类home-image 不是绝对的？而是绝对的窗户！为什么会这样？怎么了？

【问题讨论】：

.image-text_left 不是.home-image 的孩子
@ArthurHalma 是的..你是对的。白痴我！谢谢

标签： css twitter-bootstrap css-position

【解决方案1】：

在我看来，它不是 .home-image 的孩子。

      <div class="home-image">
        <img class="photography" src="http://placehold.it/700x400" />
      </div>
      <p class="image-text_left">Fashion Photography</p>

【讨论】：

谢谢...我把 <p> 放在了 div 中，并且运行良好

【解决方案2】：

这是您当前的代码：（p 类 image-text_left 不包含在 Div 主页图像中）

 <div class="home-image">
    <img class="photography" src="http://placehold.it/700x400" />
 </div>

 <p class="image-text_left">Fashion Photography</p>

在本例中包含：

 <div class="home-image">
    <img class="photography" src="http://placehold.it/700x400" />
      <p class="image-text_left">Fashion Photography</p>
 </div>

希望对你有帮助！

问候

【讨论】：