Skip to content Skip to sidebar Skip to footer
Home / Background / Css / Html / Image

Strange Css Behavior With Layers

Post a Comment
Recently i worked at site gallery, and trying to make description label in front of image. So, this is how it should look: its html:

  • Solution 1:

    The reason you are seeing text separated from it's background is because element backgrounds and foregrounds are independent.

    I added a black background to the .project-itemli and you can see that the red child bg is correctly positioned on top of the black parent bg. .annotation appears in the DOM after the img so those foregrounds are also properly layered. If you want your red annotation background to be visible above the li foreground then you are required to start a new document flow scoped within li.project-item.

    In this case the desired positioning is achieved with .slider .project-item .annotation{ position: absolute;} which is currently overridden by your static positioning.

    Backgrounds layered properly

    • Post a Comment for "Strange Css Behavior With Layers"