Question

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

<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>

我的css是：

.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
}

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

Answer 1

看起来我不是.home-image的孩子。

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

Answer 2

这是您当前的代码：（p class image-text_left不包含在Div home Image中）

 <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>

希望它可以帮到你！

问候

儿童div绝对位置与父母无关

2 个答案: