0

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body, div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 0.8rem;
  background-color: #111;
}
div {
  position: absolute;
  width: 10rem;
  height: 10rem;
  background-color: rgba( 34, 34, 34, 0.75 );
  border-radius: 5rem;
}
.orbit {
  width: 35rem;
  height: 1rem;
}
.sun {
  background-color: rgba( 153, 17, 17, 0.25 );
}
.orbit .orbit {
  width: 10rem;
  height: 0.25rem;
  margin-left: 100%;
  background-color: rgba( 255, 0, 0, 0.25 );
}
<style>
  .earth {
    width: 5rem;
    height: 5rem;
    background-color: rgba( 17, 17, 153, 0.25 );
  }
  .earth .orbit {
    width: 3rem;
    height: 3rem;
    margin-left: 100%;
    background-color: rgba( 0, 128, 0, 0.25 );
  }
</style>
<div class='orbit'>
  <div class='sun'></div>
    <div class='orbit'>
      <div class='earth'>
        <div class='orbit'>
        </div>
      </div>
    </div>
</div>

margin appears to behave correctly the first time it's used on the .orbit .orbit selector. The code .orbit .orbit { margin-left: 100%; } seems to push the element ( the red line ) and it's contents all the way to the right of it's parent. Above you can see the small red horizontal line and its child: The blue circle, pushed all the way to the right of the much thicker grey horizontal line.

I'm attempting to do the same thing here with the green circle: .earth .orbit and move it all the way to the right of it's parent's parent - which is the small red horizontal line.

However it seems to only move to the right of its direct parent which is the blue circle. How is it that I'm able to move the first blue circle all the way to the right of it's parent's parent but not the green circle here?

I've analyzed the code a few times and can't figure out what I'm missing:

Without changing the structure of the HTML, how do I move the green div all the way to the right of it's parent's parent ( the thin red line ) like I did with the blue circle before it?

Why doesn't margin apply properly on the child of this flexbox container?

Lynel Hudson
  • 2,335
  • 1
  • 18
  • 34
  • 1
    you can set it's parent's parent element position to `relative`, then set itself position to 'absolute', then `top` and 'left' ... can take effect, to place your element to a position relative to its parent's parent element – fengxh Dec 16 '20 at 10:19
  • Thanks @fengxh. Although i've tried that. Can you show me an example in this particular scenerio? – Lynel Hudson Dec 16 '20 at 10:20
  • still the idea here worked perfectly fine here: https://stackoverflow.com/questions/65015751/blur-the-edges-of-a-backdrop-filter-element-with-css but the HTML is structured completely differently in this particular question for a reason. – Lynel Hudson Dec 16 '20 at 10:22

0 Answers0