如何通过相对位置将div彼此叠加

Question

I need to place two transparent div's on top of each other, and then move them vertically from each other based on a percent value using only CSS. This is what I would like it to look like if the percent value was 20%:

In this example the div's are 100x100px, and the parent div simply have 10px left and right padding that results in 20% difference in vertical position. The code looks like this:

<div class="parent" style="padding: 0 10px;">
    <div class="child left"></div>
    <div class="child right"></div>
</div>

.parent {
    position: relative;
    display: inline-block;
    border: 1px solid black;
    min-width: 100px;
    height: 100px;
}

.child {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    opacity: 0.5;
}

.child.left {
    left: 0;
    background-color: red;
}

.child.right {
    right: 0;
    background-color: green;
}

However I don't actually know the size of the div's in my production version of the CSS, that's why I need to be able to separate them with relative percent values instead of pixels.

Here is a fiddle of the example, and one that fails:

http://jsfiddle.net/rva18302/

I can change the markup in any way, the only requirements is that the root-div resize itself dynamically to fit the child-divs, and that the child-divs keeps the same aspect ratio (square).

Answer 1

It works, but it obviously works relative of your page, as percentage is a variable value and pixel is a fixed value. You cannot assume 10px as 10% and believe that it will work.

Taking your example, I have changed the percentage value and it works.

DEMO

Code change:

<div class="parent" style="padding: 0 1.5%;">

Hope this helps.

Answer 2

I don't know if I fully understood your question but if you want to 'separate them with relative percent values instead of pixels' and keep responsiveness to parent div you could set width as percentage and it should work!!

For ex.:

.child {
  width:90%;
 }
.parent {
  width:100%;
}

fiddle

Answer 3

Would you be able to use pseudo elements for this?

 div { margin: 10px; height: 100px; width: 100px; position: relative; } div:before { content: ""; position: absolute; top: 0; left: -10%; height: 100%; width: 100%; background: red; opacity: 0.5; } div:after { opacity: 0.5; content: ""; position: absolute; top: 0; right: -10%; height: 100%; width: 100%; background: green; } 

 <div></div>