CODEWITHSUNDEEP
htmlcss-positioncss
Philip7899
Philip7899

Reputation: 4677

css - top going past parent element

I am using the top attribute to make a div begin at the top of its parent and end at the bottom. The bottom part is working. For some reason though, the top is beginning two parents back. Here is my code:

<div class="right">
    <div class="boxx details-history">
        <div class="boxx-content">
            Box content goes here
        </div>
    </div>
    <div class="boxx details-coursework">
        <div class="boxx-content custom-scroll">
            Box content goes here
        </div>
    </div>
</div>

Here is the css:

.details-coursework .boxx-content { padding: 0 0 0 0!important;  position: absolute; 
  bottom:0;  top: 0;  }

Since top: 0, '.details-coursework .boxx-content' should begin at the top of 'boxx details-coursework'. The problem is that '.details-coursework .boxx-content' is beginning at class=right. its parent element is 'boxx details-coursework', so thats where top should be set. How do i fix this?

Here is some other css for boxx, but i don't think it is relevant:

.boxx { margin-top:11px;  }
.boxx:first-child { margin-top:0;  }
.boxx .boxx-content { background: #fff; padding:4px 18px; color:#a7a7a7; 
  font-family: 'Roboto', sans-serif; font-weight:300; border-radius: 0 0 3px 3px;     }

Here is a jsfiddle. I included some more code so it would be more visible what I am trying to do. Look at the bottom-right block to see what I am trying to do:

http://jsfiddle.net/3ycGZ/

Upvotes: 0

Views: 1460

Answers (2)

user3303864
user3303864

Reputation:

ginowa320 is right. Absolutely positioned elements use the first no-static positioned element as reference. You can see an example of this here: W3Schools css positioning example

Upvotes: 0

Anid Monsur
Anid Monsur

Reputation: 4538

In order to position the child relative to the parent, you need to declare that the parent's position is relative. I believe this should remedy your issue.

.boxx.details-coursework {
    position: relative;
}

Upvotes: 2

Related Questions