Imagine this DOM:
<header>
<h1> header </h1>
<!-- other elements -->
<nav>
nav
</nav>
</header>
<div>
content
</div>
Both header and nav are positioned as fixed.
The content div is positioned as relative.
I need to create a stack, with z-index, in this order (from top to bottom):
header *:not(nav)
content
nav
I'm having a hard time putting nav in the bottom (in other words, under its parent's sibling). I'm thinking that all header's children have to go either on top or under its sibling... is this right? If so, is there a workaround for this situation?
Only content that is "positioned" such as position: absolute or position: fixed or position: relative will respect the z-index. As your HTML is structured, you can't do what you're asking for because parent/child is also respected so a child has to be in the parent (it can't be a completely different z-index vs. the parent). To do what you want, you will have to break the nav out of the header and then they can each have their own z-index, one above and one below the default zero z-index of content.
The only workaround for this, with your DOM layout is to use negative z-index values. It is not highly recommend, though, to use negative value, just like its not recommended to use negative margin values.
A better solution would be to restructor your DOM. You may find this useful. It explains the recommended ways of use the z-index property.
Hope this helps you!
Related
I don't understand why when I change position to relative, the "facebook and Facebook helps you connect and share with the people in your life" lies at the top of the page. I've just started learning css for three days. Thanks!!!!
This is the html file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="henry.css">
</head>
<body>
<div class="h1">
<h1 class="h">facebook</h1>
<p class="pr">Facebook helps you connect and share with the people in your life.</p>
</div>
</body>
</html>
css file
.h1{
position: absolute;
left: 10%;
top: 40%;
width: 550px;
}
If you need align elements, first try flexbox(remenber to add flex on the parent elements what you want align): https://css-tricks.com/snippets/css/a-guide-to-flexbox/
After some struggle with flexbox, try to align with grid: https://www.w3schools.com/css/css_grid.asp
FLEXBOX X GRID:
Flexbox: unidirection align, to aligning center vertical all elements in a list of posts
Grid: bidirectional align, generaly use to structure your page the places they will be "header, footer, menu, body..." and inside FOOTER you can use flexbox and is very common
(in first view is hard, but one day make sense to you :D)
Theses properties (flexbox, grid..) is a fluid structure where one HTML element interfere/support to another, try in "inspect elements"(in browser) and play to delete some HTML Nodes like DIVs, SPANs... and see how to behave elements in screen.
Inside these elements add a div (equal you create) with position absolute. and in inspect element (in browser) and delete these element. You will understand the element position "put it out" to structure where element interfere to anoter.
position:absolute positions an element relative to its first not static ancestor element. In this case, the div with class name "h1", the one that wraps those two sentences, has as ancestor the <body> element: this makes your div go at the top.
Little tip: avoid giving keywords as class names, it can be confusing.
I'd switch from to or
position: relative cannot be aligned in the same way as absolutely positioned elements can be using top, bottom, left, or right. Using these will instead shift their position based off of where they should be in relation to other elements.
Since there are no other elements in the DOM, the element will sit at the top.
position: absolute, which is what I assume you were using before ignores all other elements.
If you would like to give this div an offset, use the margin CSS property.
(margin-top, margin-left, margin-bottom, margin-right).
However, you cannot give a relatively positioned element a top offset without using a display, such as display: flex or display: grid
Sorry for my rushed first answer, I hope this clears things up.
Often I find myself attaching a class to an element just to give it position: relative; so that I can position it's children using position: absolute;
Would there by anything wrong, or should I say, would anything break if I was to write:
* {
position: relative;
}
or perhaps the below example, as these are usually the only elements I require the relative positioning on:
div, navbar, footer, section, aside, header, article {
position: relative;
}
According to W3schools, all elements are position: static; by default which is positioned according to the normal flow of the page.
"HTML elements are positioned static by default. A static positioned
element is always positioned according to the normal flow of the
page."
and according to the same source, relatively positioned elements also position according to the normal flow of the page unless overridden with CSS:
"The content of relatively positioned elements can be moved and overlap
other elements, but the reserved space for the element is still
preserved in the normal flow."
Yes, it is. If you try to position one element absolute it is positioned relatively to the closest ancestor, which has a CSS position other than static.
If every element has position:relative, this would be the direct parent.
But you might want to position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body.
At some point you will have the situation where you are not in full control of the HTML. Then you will see, that it is counterproductive to set everything relative.
An example might be a phat layer menu. You have the layer inside a .menu class somewhere deep in the jungle of hierarchical ul li elements. This should be positioned relative to the .menu element's position. You might not want to change the DOM tree here.
If you apply position: relative to all elements in the page, you won't be able to use position: absolute efficiently, because you can't position an element to the grandparent and you will probably break in a unpredictable way external plugins/modules that rely on position: absolute.
You may encounter problems with z-index (for example in dropdowns menu), and you'll end up overwriting this behaviour with position: static and position: absolute.
As for me using position:relative is not good - because sometimes you need to position elemet relatively browser window and it will give a problem to you. But if you are sure that you wont doing this Go ahead
The first thing that jumps to mind and one that we saw in one of our sites recently was that any absolutely positioned elements within those relatively positioned elements will have their position offset from that element.
As an example that would be a problem if you were trying to position to the centre of the body.
Setting position:relative to all elements is a bad idea. This can affect solutions built around z-index. As per html design positioned elements will display on top of unpositioned elements. If you set position for all elements some time unexpected elements participate in z-index calculation.
I am having a z-index issue. I have a couple of div that sit on top of each other, within them div there is some content which shows on mouseover. This content is currently being displayed behind the parent div.
The parent div have a z-index: 2 as they need to be displayed above there own parent.
<div class="activity-display"><!--parent div z-index: 2-->
Running<!--This is displayed on hover underneath its parent div, but gets hidden underneath the below activity-display-->
</div>
<div class="activity-display">
Running
</div>
I have tried adding a higher z-index to the anchor and this doesn't solve the issue
Any help would be greatly appreciated
When using the z-index property elements must be positioned. Change the a tag to position:absolute.
You should at least give the elements you want to work with z-index a relative position, because z-index doesn't works on a static position. So really any other than the default position works.
You also don't need to rearrange children or parents elements, because children elements will always be over the parent. In other words, a child element will always have a z-index + 1 relative to the parent.
Please make a fiddle, so that we can help.
Also, some points to keep in mind, z-index works for elements position absolute.
So I know there are a plethora of questions about position fixed/relative/absolute in relation with z-index, but I still couldn't figure out my question using those.
Essentially I have a header that is fixed. It works perfectly fine, everything goes behind it when scrolling down the page.
I recently wanted to add links to div ids, but in order to account for the header, I had to add the following code where link is the parent element, and then linkTo is the class of something with an ID that we actually link to. This functionality works completely, providing the correct offset so that the header is above the div we want.
.link {position: relative;}
.linkTo {position: absolute; top: -80px;}
The problem with this, is that for some reason now my div is behind everything on the page. I can still see it but the text and images are in front.
I've tried adding z-index to my header (of like 9999) but it isn't working. I don't understand why adding position relative would mess up the order of how things are displayed.
I'd like to provide an example, but my code is rather large. If this isn't enough I can try to make a jfiddle later.
Add position: relative; z-index:9999 to the parent element it will keep this element stick inside the menu.
As Ganesh said, adding position: relative to the parent element of the header was the starting step. After that adding z-index to the same parent element fixed the problem completely.
Check for a lower z-index on a parent element, it appears to override the z-index of children.
I've run into z-index issues in the past with drop down menus and jquery UI tabs. I thought it had something to do with the stacking effects created us rules like opacity or transition, but for me the problem was a parent element having a lower z-index than a child element.
I am unsure how to position elements using css, as when I use methods like the following, whenever I resize the browser, the elements stay in the same place instead of where I would like them to be on the resized document. Please can you tell me what I am doing wrong?!
.logo {
left: 20px;
top: 20px;
position: absolute;
}
#header h1 {
margin-top: 20px;
margin-left: 500px;
color: rgb(127, 127, 126);
line-height: 0px;
}
Please, have a fiddle - http://jsfiddle.net/hHGRc/
Within the (X)HTML DOM, CSS recognizes four types of positioning. By default, every element in HTML is positioned Statically. This means that it is positioned according to the place that it appears in the normal flow.
Relative Positioning
When an object is positioned relative, it means that it modifies the position based on the origin, which is where it would have been positioned in the normal flow (static). Relative also does something else special, however, and tells the browser that all of its children will be positioned according to this element, whether using relative or absolute.
Absolute Positioning
When an object is positioned absolute, it is placed according to the position of its nearest non-static positioned ancestor. If there is not one, then it uses the <body> to determine its position. This has the potential to break document flow, if its siblings or ancestors are not positioned absolute. If all are positioned absolute from the outer most top node to current node, then it will maintain the flow.
Fixed Positioning
This takes the element out of the flow and positions the object according to the Window object. This means that no matter the scroll state of the document, its size or any other property, it will always appear in that location. (This is how you get objects that scroll with you).
Multiple solutions to your issue
First, as described by others, you may add position:relative to the #header. It will, like explained above, make your header the nearest non-static ancestor and will use it and the basis for determining position. This is probably not ideal for you because you are an admitted novice and this one absolute could easily break enough flow that you may struggle with sibling elements.
As an alternative, you may change the logo from position:absolute to position:relative. This will keep your logo in the flow, but move the logo according to where it appears naturally in your document flow. Chances are that unless you are using floats in your #header, this is probably the one you want, as it a) keeps flow, b) allows for use of child element floats without losing flow, c) achieves your ideal positioning, d) keeps inheritance from parent elements (when it is important).
Another choice is to change the #header to position:absolute. This may alter the way everything interacts, however, unless you change all of your parent and sibling elements to position:absolute. Additionally, you may lose access to ancestor defined widths and heights, as they are only inherited if they are in the same flow. This is the 2nd best situation for you as you can simply add the rule body * { position:absolute; } and all will remain in the flow with you. However, it neglects to really teach you the things you need to learn about positioning and will simply be a crutch.
Hope this helps,
FuzzicalLogic
Defining position: absolute in CSS takes the element in question out of the flow of the document.
Think of this as layers: the bottom most layer is the document (though not always, depending on z-index!), and the top most layer is your element which you have defined as absolutely positioned.
By setting position: absolute, you have told the browser that you will be responsible for positioning the element relative to the top left corner of the document (screen). Above, you have told the browser to position #logo 20px from the left and 20px from the top of the document. When you resize your browser viewport, that element will remain in that position.
I think what you want is to position your element within the document flow, without using absolute positioning. This can be achieved with a combination of floats, margins, and padding.
CSS positioning can be tricky to understand correctly, but once you do, you'll find it very useful.
Try this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Basically, to position anything that needs to be locked to a parent or a container element, the parent or container element itself needs to be positioned as well (absolute, or relative, doesn't matter) this is called positioning context. If an absolutely positioned element cannot find a parent or container that is positioning itself, it will then use the `body as the positioning context.
So in your example, if i were to to guess without seeing your HTML and more of your CSS,
adding position:relative to #header would then allow .logo to position itself absolutely from the top left of the #header element.
Also important to remember that absolute positioning takes the element out of the normal flow of the document.
I'm going with a wild guess and saying that your logo is inside the header division, but your header is positioned staticly. Therefore, your logo is not being positioned according to the header, but according to the document's window. So it will be going to a position that is 20px right and 20px down from the top left corner of the document in all instances.
Try setting position: relative on your #header element. This will keep the header in the same place as it would always appear, and the logo will use the header box to find it's left and top positions rather than the browser window.