79269977

Date: 2024-12-10 22:29:49
Score: 0.5
Natty:
Report link

Thank you all very much! With a combination of the Information of the posts and a better understanding of the box model and its corners i found this solution, somehow the text in the paragraph with z-index: 5 still stays under the image with z-index: 3 where it should in my mind be on top.

.hide-overflow {
  overflow: hidden;
}
.green-frame {
  position: relative;
    background-color: #ECF8E3;
    padding: 2rem;
    z-index: 0;
}

.green-text {
    position: relative;
    margin: 1rem;
  padding: 1rem;
    background-color: #FFF;
    box-shadow: 0px 0px 10px black;
    border: 3px solid gold;
    z-index: 2;
  
}

p{
    font: 1rem "Segoe UI";
    z-index: 5;
}

.green-deco {
    position: absolute;
    object-fit: contain;
    object-position: center;
    z-index: 1;
}
.left-deco{
    top: 50%;
    left: 0;
    translate: -50% -50%;
}
.right-deco {
    top: 50%;
    right: 0;
    translate: 50% -50%;

}

.flip-deco {
    transform: scaleX(-1);
}
.inward-deco {
    z-index: 3;
}

.center {text-align: center}
<div class="hide-overflow">
            <h1 class="center">Frame Outward Decoration</h1>
            <div class="green-frame">
              <div class="green-deco left-deco flip-deco"><img src="https://static.vecteezy.com/system/resources/thumbnails/009/307/514/small/green-leaves-of-palm-tree-isolated-on-tranaparent-background-file-png.png"></div>
              <div class="green-text">
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
              </div>
              <div class="green-deco right-deco"><img src="https://static.vecteezy.com/system/resources/thumbnails/009/307/514/small/green-leaves-of-palm-tree-isolated-on-tranaparent-background-file-png.png"></div>
            </div>
          </article>

          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>

          <article>
            <h1 class="center">Frame Inward Decoration</h1>
            <div class="green-frame">
              <div class="green-deco left-deco inward-deco"><img src="https://static.vecteezy.com/system/resources/thumbnails/009/307/514/small/green-leaves-of-palm-tree-isolated-on-tranaparent-background-file-png.png"></div>
              <div class="green-text">
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
              </div>
              <div class="green-deco right-deco flip-deco inward-deco"><img src="https://static.vecteezy.com/system/resources/thumbnails/009/307/514/small/green-leaves-of-palm-tree-isolated-on-tranaparent-background-file-png.png"></div>
            </div>
          </div>

Reasons:
  • Blacklisted phrase (0.5): Thank you
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: 360Bits