CODEWITHSUNDEEP
htmlcss
pingul
pingul

Reputation: 3473

Make element not occupy any space

I want to create a diagonal bar that is displayed over some elements and not others on the page (see fig 1).

Fig 1

Fig 1

I try to do this by something like

#diagonal-bar {
    position: absolute;
    z-index: 50;
    width: 300px;
    height: 150%;
    -*-transform: rotate(10deg);
}

.over {
    z-index: ..
}

.under {
    z-index: ..
}

My inner vision is for the page to look like fig 2, that is, the diagonal bar extends beyond the page but it gets "cropped" away. The result is instead that, because of the position: absolute; property, the body element extends to the height of the #diagonal-bar like in fig 3. Is there some way to make an element have an element not occupy any space, even though it is there? Some kind of mixture between the fixed and absolute position property.

Adding body { overflow: hidden; } is not an option I'm afraid, as the page becomes un-scrollable. I know I could hack something together with jQuery, but if possible I would prefer a solution with html and css.

enter image description here

Fig 2

enter image description here

Fig 3

Upvotes: 0

Views: 2299

Answers (1)

Benjamin
Benjamin

Reputation: 1070

Have you tried positioning the container absolutely?

eg. https://jsfiddle.net/0xv7vygd/

Upvotes: 1

Related Questions