CODEWITHSUNDEEP
htmlcss
Roland Seuhs
Roland Seuhs

Reputation: 1995

How to prevent overlapping of a "position-fixed" element with variable size

I have a "position: fixed;" element which shall always be visible on the top of the page and contains contents with a variable height:

div.topfloat
{
    position: fixed;
    top: 0;
    width: 100%;
}

The problem is that it overlaps the content and the "top-padding:" property depends on the height of the "position: fixed" element.

Therefore I would need something like this:

div.content
{
    padding-top: [height of topfloat-element];
}

The HTML is rather simple:

<div class=topfloat>variable height</div>
<div class=contents>please don't overlap me</div>

Is there a way to solve it without using Javascript?

Upvotes: 1

Views: 292

Answers (1)

Stickers
Stickers

Reputation: 78736

Here is the non-Javascript solution, but it's not very pretty. The idea is to markup the sticky element twice, and set visibility:hidden; + position:static; on the cloned one.

.top {
    position: fixed;
}
.top + .top {
    visibility: hidden;
    position: static;
}
<div class="top">variable height</div>
<div class="top">variable height</div>
<div class="content">please don't overlap me</div>

Upvotes: 2

Related Questions