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/

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/21742350/css-top-going-past-parent-element

标签

html

css-position

css