I am currently working on customising my Big Cartel website and I've ran into the issue of the header image that scrolls with the page when using the Parade theme.
This is okay for my main shop page but for my Lookbook page, it is covering my content too much and I wish for it to either be hidden or stop scrolling.
Does anybody have a solution to this?
Thank you so much!
.header {
background-color: transparent;
padding: 50px;
position: fixed;
top: 0;
width: 100%;
z-index: 97;
}
#media screen and (max-width: 767px) {
.header {
padding: 20px;
}
}
.header.overlay-header {
position: relative;
}
.header .primary-header {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-bottom: 15px;
}
.header .secondary-header {
margin: 0 auto;
text-align: center;
}
.header .header-center {
text-align: center;
}
Your header is fixed so it'll be in a fixed position relative to the viewport. Just make it relative or remove the position all together to make it static.
.header {
background-color: transparent;
padding: 50px;
position: relative;
top: 0;
width: 100%;
z-index: 97;
}
It'd be very beneficial to you to understand the position property going forward, so here's a small overview.
There are 5 different position values you need to know;
Static (default)
An element with position: static; is not positioned in any special
way; it is always positioned according to the normal flow of the page. This is the definition of position if you don't explicitly set one in your CSS.
Relative
An element with position: relative; is positioned relative to its
normal position where it falls in the hierarchy.
Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted away from
its normal position. Other content will not be adjusted to fit into
any gap left by the element.
Fixed
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element. If you set a navbar to fixed at the top, it'll always be at the top of the view. If you set a footer to fixed at the bottom, it'll always be at the bottom of the view and remain there when scrolling.
Absolute
An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).
However; if an absolute positioned element has no positioned
ancestors, it uses the document body, and moves along with page
scrolling.
Personally I recommend being a bit cautious with absolute
positioning and really only use it for overlays and layering as an
element positioned absolute will ignore the flow of the document.
Related
Simple fiddle : https://jsfiddle.net/75zwpy3b/2/
The navbar is styled as
#navbar {
background-color: #333;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
/* width: 100%; */
position: fixed;
}
As you can see the width has not been applied but position:fixed is applied, the navbar contracts to fit its content, but if i comment out position:fixed then suddenly the navbar goes all the way from left to right.
Why does position:fixed requires width:100% to go with it ?
Since it´s fixed it doesn't know of its parent elements or siblings so it just fits the width to its contents. One solution is to go width: 100% or left: 0; right: 0;
Since you are setting a fixed position it needs a height and width property since there are no other defined elements to go off of. If you want the nav to scale across the screen then use width: 100% but if you wanted a specific fixed nav size you could do width: 800px.
So I have a bottom div which needs to be fixed in all screen size, and the remaining upper contents just get scrolled when the screen size gets sufficiently small.
.mainContainer {
display: flex;
flex-direction: column;
overflow-y: scroll;
text-align: center;
position: fixed;
top: 0;
bottom: 70px;
width: 100%;
}
.fixedBottom {
display: flex;
flex-direction: row;
padding: 10px 10px;
justify-content: space-around;
bottom: 0;
position: fixed;
width: 100%;
}
I've put bottom: 70px for the meantime to see lowers contents, when otherwise 0 the page wouldn't be able to scroll through the whole page as the bottom div is fixed hence hindering it. Well, this setup actually works on well on chrome, moz and opera but not on safari, my bottom div is whitened lol but the element is there.
Update: (temporary solution) since bottom div is fixed and it's going to be in the bottom of the page no matter what, put fixedBottom outside mainContainer. mainContainer becomes a sibling element to fixedBottom and wrap these elements into a div. However, I would still prefer mainContainer becoming a parent element.
In CSS, position: sticky enables an element to display with a position: static behaviour (ie. it adopts its default position within the document flow) until it reaches a certain scroll position, after which it adopts position: fixed behaviour.
So... does that mean we cannot use position: sticky on an element which requires a normal behaviour of position: absolute?
Context:
I have an out-of-flow element which occupies a position towards the top-left corner of the viewport. After an inch or two of scrolling, the element hits the top of the viewport and, ideally, I'd like it not to carry on disappearing at that point.
You actually can leverage display: grid and have a sticky element that doesn't pushes its siblings:
header {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
border: 1px dashed #f00;
}
main {
display: grid;
}
div {
display: flex;
align-items: center;
justify-content: center;
}
.section {
grid-column: 1;
height: 100vh;
border: 1px dashed #0f0;
}
.first.section {
grid-row: 1;
}
.sticky {
grid-row: 1;
grid-column: 1;
position: sticky;
top: 0;
height: 30vh;
border: 1px dashed #0ff;
}
footer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
border: 1px dashed #f00;
}
<header>I'm the header</header>
<main>
<div class="sticky">I'm sticky</div>
<div class="first section">Just</div>
<div class="section">some</div>
<div class="section">sections</div>
</main>
<footer>I'm the footer</footer>
The trick here is to place the sticky section and its first sibling on the first row and first column of their parent (because grids allow us to place many elements in the same cell).
The sticky element remains sticky in its parent so it will stay on scroll beyond its cell.
As GibboK says, the default positioning scheme isn't absolute positioning, it's the static position. Elements are laid out in normal flow by default — if out-of-flow were the default, then the default HTML page would be impossible to read. Besides, absolutely positioned elements do scroll with the page most of the time — the only time you can make an absolutely positioned behave like a fixed positioned element with respect to page scrolling is through some semi-complicated CSS.
If you're asking whether it's possible for
a stickily positioned element to be out-of-flow when stuck and unstuck, or
for the containing block of a stickily positioned element to be determined the same way as for an absolutely positioned element,
then unfortunately neither of these is supported by sticky positioning.
The point of position:sticky is that it is only fixed while the parent element is not in view. A position:absolute element isn't attached to it's parent.
It could be interesting if such a position would exist and the rule would be that the element would be absolute, while the element it is absolute positioned to is in view, but currently there exists nothing like this nativley, but you could try to recreate it using JS.
A way to make a sticky element look like it's absolutely positioned
I came up with this hack that achieves the goal, but I haven't figured out how to fix its one flaw: There's a blank area at the bottom of the scrollable content equal to the height of the sticky element + its initial vertical offset.
See the comments in the code for an explanation of how it works.
#body {
width: 100%;
position: relative;
background: Linen;
font-family: sans-serif;
font-size: 40px;
}
/* to position your sticky element vertically, use the
height of this empty/invisible block element */
#sticky-y-offset {
z-index: 0;
height: 100px;
}
/* to position your sticky element horizontally, use the
width of this empty/invisible inline-block element */
#sticky-x-offset {
z-index: 0;
width: 100px;
display: inline-block;
}
/* this element is sticky so must have a static position,
but we can fake an absolute position relative to the
upper left of its container by resizing the invisible
blocks above and to the left of it. */
#sticky-item {
width: 150px;
height: 100px;
border-radius: 10px;
background-color: rgba(0, 0, 255, 0.3);
display: inline-block;
position: sticky;
top: -80px;
bottom: -80px;
}
/* this div will contain the non-sticky main content of
the container. We translate it vertically upward by
sticky-y-offset's height + sticky-item's height */
#not-sticky {
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
transform: translateY(-200px);
}
.in-flow {
width: 90%;
height: 150px;
border-radius: 10px;
margin: 10px auto;
padding: 10px 10px;
background: green;
opacity: 30%;
}
<div id="body">
<div id="sticky-y-offset"></div>
<div id="sticky-x-offset"></div>
<div id="sticky-item">absolute & sticky</div>
<div id="not-sticky">
<div class="in-flow">in flow</div>
<div class="in-flow">in flow</div>
<div class="in-flow">in flow</div>
<div class="in-flow">in flow</div>
</div>
</div>
I'm trying to position my image to the center horizontally, but I can't seem to make it work, this is what I have.
.drugimg p img {
position: absolute;
align-items: center;
justify-content: center;
display: inline;
margin-left: 0 auto;
margin-right: 0 auto;
text-align: center;
width: 30%;
border: 3px solid #73ad21;
padding: 5px;
}
Margins and absolute positioning generally don't mix.
If you want to center horizontally you can either do this (relative positioning):
margin: 0 auto;
Or this (absolute positioning):
position: absolute;
left: 50%;
transform: translateX(-50%);
For the second solution, keep in mind that it will be centered horizontally relative to the nearest parent element with position:relative. This means that if the immediate parent is relatively positioned, the child will be horizontally centered relative to it. If the parent's parent is relatively positioned, the element will be centered relative to that. If nothing is relatively positioned, your element will be centered relative to the viewport.
I have issues with understanding the div position (relative, absolute, fixed) properties. I basically have an absolute div centered. Inside the div it should be possible to scroll vertically and horizontally. Inside this div should be a fixed header with a width larger than to screen (overflow) and a content div which has an overflow vertically and horizontally as well.
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(100% - 20px);
height: calc(100% - 20px);
top: 10px;
left: 10px;
background: #2924aa;
overflow: scroll;
display: flex;
position: absolute;
z-index: 20;
}
.container-header {
width: calc(100%);
height: calc(10%);
background: #2924aa;
overflow: visible;
z-index: 10;
position: fixed;
background: red;
}
.container-body {
width: calc(110%);
height: calc(110%);
background: #2924aa;
overflow: auto;
position: absolute;
background: green;
}
<div class="container">
<div class="container-header"></div>
<div class="container-body"></div>
</div>
Here is my plunker:
https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy
So i think the main question you have is in regards to the Position Attribute in CSS3. Below is a brief summary of each possible value.
CSS Positioning
The CSS positioning attribute of position has four different values.
Static - Static is the default value for position. It keeps the element on the page in its place, and it scrolls up the page as you scroll.
Relative - Relative positioning is pretty much as the same as static; however, you can use the left, right, top, and bottom attributes to alter the placement of the element relative to its original position.
Fixed - A fixed element's position is in relation to the viewport (i.e. the browser) therefore, an element with a fixed position does not scroll with the page, because when you scroll the viewport does not change. However, if you resize the browser, the element will change position.
Absolute - A element with an absolute position, is positioned relative to its parent element (i.e. the element that contains it).
A good resource for more information, including some diagrams can be found here.