2

I would like to have kind of a sticky section which has a fixed position at the top when the user scrolls through the page.

If I set the width to 100% of the sticky container it overflows the parent div container. The width should be exactly the same even if I resize the browser.

You can see my problem here: https://jsfiddle.net/d49tyfo2/2/

body {
  padding: 50px;
}
#d-header {
  height: 400px;
  position: relative;
  padding-bottom: 55px;
  background-color: blue;
  margin-bottom: 0px !important;
  box-shadow: 2px 5px 3px 0 rgba(0,0,0,0.16);
  z-index: 1;
}

.tab-container {
  position: absolute;
  width: 100%;
  bottom: 10px;
  height: 55px;
  letter-spacing: 1px;
}

.tabs {
    background-color: orange;
    color: white;
    text-transform: uppercase;
    width: 26.8%;
    height: 50px;
    line-height: 50px;
    float: left;
    text-align: center;
    margin-left: 10px;
  }

.date {
  position: absolute;
  font-size: 72px;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 65px;
}

.header-sticky {
  position: fixed;
  top: 83px;
  width: 100%;
  height: 205px;
  background-color: white;
  box-shadow: 0 5px 4px 0 rgba(0,0,0,0.16),0 0px 0px 0 rgba(0,0,0,0.12);
  border: 1px solid black;
}
<body>
<div class="myHeader" id="d-header">
        <div class="special-headline-wrap" style="width: 526px;">
            <h1 class="special js-done">HEADLINE</h1>
        </div>
        <p>Aenean lacinia nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>

        <div id="date-tab-wrapper" class="header-sticky">
            <div class="date">2017</div>

            <div class="tab-container">
                <div class="tabs" style="margin-left: 9.1%;">Tab 1</div>
                <div class="tabs">Tab 2</div>
                <div class="tabs">Tab 3</div>
            </div>
        </div>
    </div>
</body>

What I am missing here?

Marlon
  • 197
  • 2
  • 16
  • Well, if it sticks to a position on the screen, it will always overflow other content in some way. I don't completely understand what you are trying to achieve. The width of *what* should be always the same? – bkis Oct 12 '17 at 08:32
  • @mumpitz the width of 'date-tab-wrapper' (which is fixed) should be the same as 'd-header' – Marlon Oct 12 '17 at 08:35
  • 1
    Yeah, pretty sure you can't do that. Fixed position element are **always** related to the viewport and ignore any parent widths etc. Perhaps `position:sticky` might be an option. Otherwise, you'll probably need JS. – Paulie_D Oct 12 '17 at 08:41
  • See - https://stackoverflow.com/questions/5873565/set-width-of-a-position-fixed-div-relative-to-parent-div – Paulie_D Oct 12 '17 at 08:42
  • and - https://stackoverflow.com/questions/17806852/set-a-fixed-div-to-100-width-of-the-parent-container – Paulie_D Oct 12 '17 at 08:42
  • @Paulie_D, fixed position elements are **not always** related to the viewport. Their position is computed based on their [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block). There are several instances described in the linked documentation where the containing block can be an element other than the viewport. You can see an example of this behavior [here](https://neo.bes.works/bits/?fixed-menu). – Besworks Jun 02 '22 at 15:01

2 Answers2

1

Elements that are position: fixed are removed from the document flow, and are therefore not subject to their parent containers. From CSS Tricks:

position: fixed - the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.

Scott Brown
  • 334
  • 1
  • 2
  • 13
0

Try width:100vw, which is the viewport relative unit for width. By switching to viewport units it worked for me synchronizing two elements of which one was position:fixed.

user19074969
  • 21
  • 3