Positioning a relative element after a fixed element: Tips and tricks

I can't seem to figure out how to make a position:relative element display after a position:fixed element. In my code snippet, there is a green section representing the relative element and a blue fixed element. By using padding-top, I am able to position the content of the relative section after the fixed element, but this also hides the fixed section.

Is there a way to place the relative section 100vh from the top of the screen so that it allows the fixed section to occupy 100vh? And when scrolling down, the content of the relative section becomes visible?

#page-wrap {
margin-top: 70px;
max-width: 100%;
}
#homeMain {
width: 100%;
height: 100vh;
position: fixed;
background: blue;
}
#sectionCover {
position: relative;
padding-top: 100vh;
/*z-index: 1;*/
height: auto;
width: 100%;
background: green;
}
<div id="page-wrap">
  <section id="homeMain">
    <p>Sample Text</p>
  </section>
  <div id="sectionCover">
    <p>Sample Text</p>
    <p>Sample Text</p>
    <p>Sample Text</p>
    <p>Sample Text</p>
    <p>Sample Text</p>
    <p>Sample Text</p>
    <p>Sample Text</p>
    <p>Sample Text</p>
    <p>Sample Text</p>
    <p>Sample Text</p>
  </div>
</div>
htmlcss

Answer №1

Make sure to use margin-top instead of padding-top on your relative element. Also, remember to add padding-top: 100vh to the #page-wrap to adjust the scroll height.

* {
margin:0;
padding:0;
}
#page-wrap {
margin-top: 70px;
max-width: 100%;
  padding-top: 100vh;
}
#homeMain {
width: 100%;
height: 100vh;
position: fixed;
  top:0;
  background: blue;
}
#sectionCover {
position: relative;
margin-top: 100vh;
/*z-index: 1;*/
min-height: 100vh;
width: 100%;
  background: green;
}
<div id="page-wrap">
  <section id="homeMain">
    <p>fndskjafndoaf</p>
  </section>
  <div id="sectionCover">
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p><p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p><p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  </div>
</div>

Answer №2

To achieve the desired spacing effect, you can substitute padding-top with margin-top and incorporate some positioning for the fixed element:

#page-wrap {
  margin-top: 70px;
  max-width: 100%;
}

#homeMain {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0; /* added */
  left: 0; /* added */
  background: blue;
}

#sectionCover {
  position: relative;
  margin-top: 100vh; /* modified */
  background: green;
}
<div id="page-wrap">
  <section id="homeMain">
    <p>Sample text goes here</p>
  </section>
  <div id="sectionCover">
    <p>Sample text goes here</p>
    <p>Sample text goes here</p>
    <p>Sample text goes here</p>
    <p>Sample text goes here</p><p>Sample text goes here</p>
    <p>Sample text goes here</p>
    <p>Sample text goes here</p>
    <p>Sample text goes here</p><p>Sample text goes here</p>
    <p>Sample text goes here</p>
    <p>Sample text goes here</p>
  </div>
</div>

Answer №3

adjust placement to absolute

#homeMain {
    width: 100%;
    height: 100vh;
    **position: absolute;**
    background: blue;
    z-index:2;
}


#page-wrap {
margin-top: 70px;
max-width: 100%;
}
#homeMain {
width: 100%;
height: 100vh;
position: absolute;
    background-color: blue;
    z-index:2;
}
#sectionCover {
position: relative;
padding-top: 100vh;    
height: auto;
width: 100%;
  background-color: green;
}
<div id="page-wrap">
  <section id="homeMain">
    <p>fndskjafndoaf</p>
  </section>
  <div id="sectionCover">
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p><p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p><p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  <p>fndskjafndoaf</p>
  </div>
</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

The vertical lines separating the buttons are not evenly centered

I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you. https://i.sstatic.net/XIeiQ4E ...

htmlcssangular

Modify the appearance of selectInput and numericInput controls

Looking to update the appearance of my Shiny UI elements to better match the overall website design. Specifically, I want to eliminate the rounded edges on the selectInput boxes for a cleaner look like this: https://i.sstatic.net/pepak.png Additionally, ...

javascripthtmlcssrshiny

The inner div appears to have content but is actually measured as 0x0 in size

Despite having content, my main div doesn't have a height or width. I am trying to make the main div fill 100% of the space between the header and footer so that the background image for main is displayed across the entire page excluding the header an ...

csshtmllayout

Is it possible to incorporate @font-face with Ruby on Rails?

I've been struggling to implement my custom font in a Rails project. The font files are located in app/assets/fonts/. I made changes to the CSS: # in app/assets/stylesheets/application.css @font-face { font-family: 'fontello'; src: u ...

cssruby-on-railsrubyfonts

How to load an iframe only upon clicking on a link

I am struggling to make the iframe popup appear only when a specific class link is clicked. Here is my HTML and JS code: Unfortunately, nothing happens when I click the link with the class 'aclass'. I have updated my JavaScript, but the issue ...

javascripthtml

I am facing an issue where the carousel CSS styling is not reflecting on the

Recently, I decided to dive into the world of bootstrap and am experimenting with the carousel feature for the first time. However, I seem to be facing some challenges with styling. Despite trying to adjust the size of my image using CSS, I haven't se ...

htmlcssbootstrap-5

Creating a scrollable table body in Bootstrap 4

I am struggling to make a large table mobile-friendly using Bootstrap 4. The table can have up to 10 columns and 100 rows. I need a CSS solution that achieves the following: A fixed header with each column having the same width as its respective row An x/ ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Ajax requests with MVC action methods that lack parameters may fail to return any results

I have 2 dropdown list boxes where I load values into the first dropdown list and based on its selection, I load values into the second dropdown list using the same action method through ajax. Here is the script I am using: $(document).ready(function () ...

jqueryajaxasp.net-mvchtmlcss

Setting an AngularJS variable as the name attribute in an HTML tag

Important Values {{item.name1}} equals item_name_1 {{item.description}} represents a Band Situation 1 <input name="item_name_1" value={{item.description}}> The input field is filled with Band Situation 2 <input name={{item.name1}} value={{ ...

htmlangularjs

Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

Is there a way to position an HTML element in relation to another using CSS or JavaScript? I have attempted to copy the inner HTML of the "second-element" and append it inside the "first-element", but this approach is causing issues with other functional ...

javascripthtmlcsspositioncss-position

Adjust the size of the div to fit its content while maintaining the transition animation

I am aiming for the DIV height to automatically adjust to the text within it, while also maintaining a minimum height. However, when the user hovers their mouse over the DIV, I want the height to change smoothly without losing the transition effect. When ...

javascripthtmlcss

Enhancing the background with curves for optimal viewing on mobile devices

I'm currently pondering if I should create the shapes manually or simply use a background image to achieve the desired effect on mobile view. https://i.sstatic.net/y99A8.png Any input or guidance on this matter would be greatly appreciated. As of n ...

htmlcssreactjsbackgroundshapes

Why isn't my .gif animation appearing on Google Chrome? Can anyone suggest a reason for this issue?

const urlToLoad = "winners.php"; const ajaxLoader = '<div class="preloaders"><img src="img/preloader.gif" alt="Loading..."></div>'; $(".page").click(function(){ $(".main").html(ajaxLoader).load(urlToLoad); }); I am trying ...

jqueryhtmlcssgoogle-chromeanimated-gif

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

htmlcssreactjs

Issues with the alignment of ion-grid in Ionic/Angular application

I am facing an issue in my ionic/angular project where I am attempting to create two columns within a row using ion-grid, ion-row, and ion-col. However, the content of the second column is unexpectedly appearing below the first column instead of beside it. ...

cssangularionic-framework

How can I link two separate webpages upon submitting a form with a single click?

Here is a snippet of my code: <form action="register.php" method="post"> <input type="text" name="uname"> <input type="submit" > </form> Within the register.php file, there are codes for connecting to a database. I am looking ...

javascriptphphtml

Using Jquery to loop through various select options within a designated container div

I am seeking a way to loop through multiple select options within a specific div using the jQuery each function. If any field is left empty during this iteration, I would like the loop to break and set the reqCourseFlag variable to 0. The current implement ...

javascriptjqueryhtmlloops

Generate a dynamic vertical line that glides smoothly over the webpage, gradually shifting from one end to the other within a set duration using javascript

I have designed a calendar timeline using html. My goal is to implement a vertical line that moves from left to right as time progresses, overlaying all other html elements. This functionality is similar to Google Calendar's way of indicating the curr ...

javascriptjqueryhtmlcss

Adjusting the length of the To, CC, and BCC text fields in web design

I'm developing a webpage that will collect email addresses for user notifications. I want to ensure the length limits of the 'to,' 'cc,' and 'bcc' fields. According to RFC 2821/3696, an email address can be up to 256 cha ...

htmlwebhtml-email

What steps can be taken to modify the `select` element in IE?

I came across a solution to display an arrow on a select element in this answer: select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1 ...

css