CODEWITHSUNDEEP
csstwitter-bootstrapcss-position
Nitish
Nitish

Reputation: 2763

Child div absolute position is not relative to parent

I am using bootstrap as my CSS framework. My HTML code is as below:

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

But, as I stated in my question, the class .image-text_left is not absolute relative to the parent class home-image? Rather it is absolute to the window! Why this is happening? What's wrong?

Upvotes: 1

Views: 2949

Answers (2)

Merijndk
Merijndk

Reputation: 1693

This is your current code: (p class image-text_left is not included in Div home Image) 

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

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

In this example it is included:

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

Hope it helps you!

Greetings

Upvotes: 1

MildlySerious
MildlySerious

Reputation: 9170

Looks like it's not a child of .home-image to me.

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

Upvotes: 4

Related Questions