CODEWITHSUNDEEP
javascriptjqueryhtmlcss-position
Claire
Claire

Reputation: 149

Fixed and relative elements within a div

I'm trying to position a fixed element WITHIN a div (not the whole page) in my website.

I want the navigation (deadspin, gawer, awl, other) to be fixed within the writing section so that even when user scrolls, the nav is still there. But currently it's fixed for the whole page.

As you can see on my test page, the navigation is fixed the way I want it to be.

I tried messing around with position:relative/position:fixed for the #small-box-links but that doesn't help.

.home_writing {
  display: block;
  position: relative;
  background: rgba(50, 50, 50, 0);
  height: 1000px;
  text-align: left;
}

#small-box-container {
  border: 1px solid black;
  background: rgba(10, 200, 10, 0);
  width: 980px;
  height: 800px;
  overflow: auto;
}

#small-box-links {
  position: relative;
  margin-left: 700px;
  height: 25px;
  margin-top: 10px;
}
<div id="small-box-container">
  <div id="small-box-links">
    <a href="#small-box1" class="top_link_style">deadspin |</a>
    <a href="#small-box2" class="top_link_style">gawker |</a>
    <a href="#small-box3" class="top_link_style">the awl |</a>
    <a href="#small-box4" class="top_link_style">other</a>
  </div>
  <div style='overflow:hidden; width:980px;'>
    <div style='overflow:scroll; width:988px'>
      <div id="small-box1" class="small-box">
        <h2>deadspin</h2>
        <h3>How Pat Summitt Ruined The Best Thing About Women's Basketball</h3>
<!-- etc. for other boxes -->

I found this related question and yet when I try top / left, etc., the element is still fixed to the page, not writing div. (I tried making the parent element, .home_writing, relative but this doesn't fix my issue.)

(On another note, I can't figure out why my Playfair in the paragraphs doesn't look like the sidebar navigation. It's styled the same way).

Upvotes: 0

Views: 513

Answers (1)

C3roe
C3roe

Reputation: 96306

position:fixed always uses the viewport as the frame of reference, so you can’t use that here.

But the solution is rather simple - use position:absolute instead to position the navigation inside a container element that has position:relative (and a fixed height), and then have the content as a sibling inside that container as well, with fixed height and overflow:auto for that element:

<div style="position:relative; height:800px;">
  <div style="position:absolute; top:0; …"> [link link link] </div>
  <div style="height:800px; overflow:auto;">
    Lorem ipsum, dolor sit …
  </div>
</div>

Upvotes: 1

Related Questions