Preventing overlapping of a "position-fixed" element with variable size: Effective strategies

I am trying to keep a fixed element visible at the top of the page while also having content with varying heights. Here is the CSS code for the fixed element:

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

The issue I'm facing is that the fixed element overlaps with the content, and adjusting the "top-padding" property based on the fixed element's height doesn't work well.

I need a solution like this:

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

Here is the simple HTML setup:

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

Is there any way to resolve this without resorting to Javascript?

htmlcss

Answer №1

If you're looking for a solution without using Javascript, here's one that may not be the most elegant. The trick is to duplicate the sticky element and apply visibility:hidden; + position:static; on the second instance.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the best way to save data from an HTML input field into a JavaScript array?

Can someone help me with storing a value from an HTML input field into a JavaScript array after a button click, and then displaying that array data on the screen? Here is the HTML code I am currently working with: <!DOCTYPE HTML> <html> < ...

javascriptjqueryhtmljson

Floating Action Button is not properly attached to its parent container

When developing my React Js app, I decided to utilize the impressive libraries of Material UI v4. One particular component I customized is a Floating Action Button (FAB). The FAB component, illustrated as the red box in the image below, needs to remain p ...

javascriptcssreactjsmaterial-ui

Understanding the structure of html elements

Within my downloaded HTML files, I consistently have key executives mentioned at the beginning of each file (like "Dror Ben Asher" in the code snippet below): <DIV id=article_participants class="content_part hid"> <P>Redhill Biopharma Ltd. (NA ...

pythonhtmlbeautifulsouphtml-parsing

How to position slides in the center using react-slick

I'm having difficulty achieving vertical centering for an image in a react-slick carousel implementation. The issue can be seen here. https://codesandbox.io/s/react-slick-playground-o7dhn Here are the problems identified: Images are not centered: ...

htmlcssreactjsslick.jsreact-slick

When a user clicks a button, Javascript will generate a fresh upload image form

I am interested in creating a button that, when clicked, generates a new image upload button within a form I have already created in HTML. My goal is to figure out the best approach for this functionality, especially considering that there is a remove butt ...

javascriptjqueryhtml

How to create a heading within a Bootstrap list item?

Attempting to replicate this layout using Bootstrap 3 This is my current progress <ul class="list-group"> <li class="list-group-item> Cras justo odio </li> <li class="list-group-item> Dapibus ac facilisis in </l ...

csstwitter-bootstrap

Retrieve the input name array key value using jQuery from the adjacent TD

It's a tough one to summarize in the title, but here is the code snippet that explains it: <tr class=""> <td> <input value="9" name="set[122][order]"></input> <input class="set-id ...

phpjqueryhtml

Modifying webpage design using JavaScript for styling

Is there a way to change the css style(defined in the page source) dynamically with Java? I know it is possible to do it with JavaScript. If there isn't, are there other situations where JavaScript is the only choice developing a web app? ...

javajavascriptcss

Choosing specific child elements based on their css attribute valuesUnique: "Targeting

I am attempting to customize the appearance of any child divs with the class 'header' that are within parent divs with a class of 'recipes'. I understand that I could simply target .category-recipes .header, but the parent div may vary ...

csswordpresscss-selectors

Learn how to automatically navigate to another page upon successfully creating an account and setting a value in the Firebase database

I am working on a system where, after successfully creating an account and setting a value in Firebase database, the user will be redirected to another page. Currently, I have managed to navigate to the next page but I am facing an issue with setting the ...

javascripthtmlfirebase-authentication

Removing the restriction on maximum width to 100% and allowing for automatic height adjustment

Within my project, I have implemented a CSS technique where all images within a container are set with the attributes max-width: 100%; and height: auto;. This is done to ensure that images scale down appropriately when the viewport and container size decre ...

htmlcssimageresponsive-design

The background image is not adjusting properly to the browser when resized

I'm having trouble keeping my background image fitted to the browser when I resize the window. Can someone please assist me with this issue? Here are links to images that illustrate what's happening: View images. The first image shows how it shou ...

imagebrowserbackground-imagestretchcss

How can you prioritize one CSS file over another?

To avoid repetition, I wish to have all the classes, tags, and ids from css.css take precedence over bootstrap.min.css, without duplicating any from bootstrap.min.css. <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/css.css ...

htmlcss

Establish a new <section> to serve as a distinct webpage

I have a question about creating multiple <section> elements on a page. I am looking to build an HTML document with several <section> tags, as outlined below. <html> <head> </head> <body> <sectio ...

javascriptjqueryhtmlcss

Require a date picker in Vuetify, prohibiting any kind of text input

I am working with vuetify to create a date picker for capturing a user's birthday. I need the date picker to be a required field in my form and only accept date values. Here is what I have attempted: <v-flex xs12> <v-menu ref="menu" ...

htmlvue.jsdatepickervuetify.js

Dropping anchor whilst skipping or jumping

One of my website elements is a drop anchor that connects from a downwards arrow situated at the bottom of a full-page parallax image to another section on the same page. The HTML code snippet for the drop anchor is as follows: <section id="first" cla ...

javascriptjqueryhtmlcsswordpress

The presence of a display block property within a div contained inside an li element results in extra whitespace

I am presenting the code below: <div class="settingsMenu" style="top: 135px; left: 149px; display: block;"> <ul> <li class="download" onclick="downTemplate('template1')">Download</li> <l ...

csshtmlhtml-lists

CSS: Breaking free from the constraints of a Bootstrap-inspired grid layout

Looking to create a template with a background on the left side that extends to the edge of the page within an 8 of 12 bootstrap columns setup. The remaining 4 columns on the right will not have a background. This layout should be responsive, stacking on t ...

cssbootstrap-4

Exploring search capabilities within D3 graph nodes

After creating a JSON file with four tiers and utilizing D3.js's collapsing box format to visualize it (source: https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460), I've run into an issue. The problem stems from the sheer size of the J ...

javascripthtmljsond3.js

Differentiate your borders with CSS styling of various colors

Is there a way in CSS to create multiple lines with different colored borders stacked on top of each other without using a background image? Take a look at the example below: https://i.sstatic.net/w9F44.jpg ...

csshtml