I have googled a lot and am here to seek some expert's suggestion on this issue am facing.
The header has a css below -
.head {
position: fixed;
z-index: 1;
}
and the content on the page DIV has a form with a tooltip in some of it's fields with below css on the tooltip -
<div class="sample">
<input type="text">
<div class="tooltip" style="top: -44px; left: 1228px;
display: block;">
<div class="downarrow"></div>
<div class="inside">Sample tooltip text goes here!!!</div>
</div>
</div>
and the css -
.tooltip{
position: absolute;
z-index: 1070;
}
Now, from my knowledge the stacking goes like fixed, absolute and then relative(please correct me if wrong). which is why my tooltip goes under the header div. But, is there any way to make the tooltip come on top?
Appreciate your responses. I have pretty much hit a wall in finding a solution without making layout changes and hence the post.
Update: CodePen: https://codepen.io/anon/pen/VVJpzw
Remove z-index: 0 from your .main css class, instead of removing position relative. If you just remove position relative or z-index, you are dismissing the stacking context (reference) in this main section, but there are still more use cases for having position: relative than a z-index (absolute positioned elements contained inside). You do not want to create a stacking context on your main section in cases where the Header has something like a mega menu/drop down navigation, otherwise those menus will display underneath the main section.
If you need any sort of structure in the main section, create child items of .main so that the stacking context starts there instead of on the same level as the header.
Just remove position: relative property of .main class, because of relative parent it's not going out.
.main {
padding-top: 100px;
flex: 1 0 auto;
display: block;
[position: relative;] -------> remove this line.
display: flex;
flex-direction: column;
width: 100%;
height: 50vh;
box-sizing: border-box;
z-index:0;
}
Related
I want to create a slider, so here is the code:
div#list_container {
position: relative;
width: 100%;
}
div#first_list {
position: absolute;
left: 0px;
top: 0px;
}
div#second_list {
position: absolute;
left: 70%;
top: 0px;
}
<div id="list_container">
<div id="first_list">
<h1>Smth</h1>
</div>
<div id="second_list" class="aim_list">
<h1>Smth</h1>
</div>
</div>
<h2>Following elements</h2>
It kinda works (I would just change left property to move them), but since parent (div#list_container) is positioned as relative, so it doesn't cover children elements, so another elements, which will go after slider are shown above it. How can I fix it?
When you change position of child elements to absolute, they are no longer relative to their parent element. Either make parent absolute while changing children's position to relative, or add height to parent.
I also highly recommend implementing this using CSS Flexbox, otherwise it will be very difficult to maintain. See if you can work with this:
#list_container {
position: absolute;
width: 100%;
display: flex;
justify-content: space-around;
}
#list_container > *{
flex-grow: 1;
}
The problem is that, since your child elements are with absolute positioning, there is nothing that actually expands the box of the parent element. To fix it, you can add height to the div#list_container, depending on your design target.
code: https://jsfiddle.net/Nemoko/m8vLprb6/11/
problem:
I try to put the footer to the bottom of the page. because when I have to scroll down(when I have a lot of content in the page) the footer is in the way: but when I dont have to scroll. the footer is perfectly in place
how do I fix this?
what I tried:
adding position:relative; in the body
this however hides the footer somehow at the top of the page and margin-top does not work setting position:relative; in the footer shows it again, however than it somehow sticks to the top of the page
adding display:flex; flex-direction:column; min-height:100vh; in the body
this makes the footer appear again
I see your problem - the solution is this change both the body and footer position to relative - also change flex-direction:row not sure why you had it as column, experimenting i assume, i also added a flexbox property to space around your content. justify-content:space-around;
what i recommend further is reading this pages when you get a change, will help you with positioning and use of div/ boxes a bit better.
but in simple terms position:absolute doesn't move.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm also pretty new - so i understand where you at bro.
.content {
left: 96px;
top:200px;
width: 1728px;
position: relative;
background-color: #0fa1cb;
opacity: 0.9;
color: #FFFFFF;
}
.footer{
left: 96px;
bottom: 0;
width: 1728px;
position: relative;
display: flex;
background: linear-gradient(#0fa1cb,#000046);
opacity: 0.9;
flex-direction: row;
justify-content:space-around;
It looks like your biggest issue is that you are using absolute positioning on your content and footer sections. Setting position:absolute on an element removes it from the document flow. You would have a much easier time removing the absolute positioning from the content section and then setting position:relative on the Body element. I have always found it to be a best practice to use absolute positioning sparingly, and definitely not for large content sections that may contain an arbitrary amount of content.
I don't know if is possible through CSS only to have one absolute footer under a relative element - being the relative one different in height due to the nature of it: either change of content or responsiveness. My HTML (using Angular 5):
<main>
<app-navbar></app-navbar>
<div class="content-container" [#fadeAnimation]="routeTransition(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
<app-footer></app-footer>
</main>
The reason why I want to have that is because the relative element contains the view of the user and I'm using angular animations which happen to "require" the elements that get displayed being absolute positioned in order to get the desired visualisation.
The problem with that is that for large elements I am having issues because the footer which is also absolute, does overlap the actual content if that makes sense.
I want to have a "sticky footer" at the bottom of the page so that it has absolute configuration etc (app-footer will render footer):
footer{
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
}
My CSS:
main{
padding-top: 10px;
padding-bottom: 100px;
}
.content-container{
position: relative;
}
/deep/ router-outlet~* {
position: absolute;
width: 100%;
height: 100%;
}
That was working fine till I added the relative to the .content-container to have the absolute position to the inner element.
A possible workaround I came across was to give a fixed height to the .content-container class and do the different resolutions so I can push down the footer. However I don't think that's possibly the best approach. I'm using Angular 4 if that's of any help. I also had a look at How to position element below relative positioned element without overlapping? but again, the suggested solution was to do with hardcoding the height.
UPDATE 1: I have updated the question with more detailed info. Hope it is now clear.
UPDATE 2: Plunker: https://plnkr.co/edit/FHhncrGBcO9jaNRiUfJQ?p=preview
Parent:
position: relative;
Child:
position: absolute;
z-index: 2;
top: 100%;
If I understood your problem, you need to set a position: relative and a z-index to your .content-container.
Keep in mind that the z-index and the absolute positioning refers to the next relative parent. This is the body by default, but it could be a div with a position: relative in-between.
.content-container{
position: relative;
z-index: 2;
background-color: rgba(180,100,50,.7);
padding: 85px 20px;
}
footer{
position: absolute;
bottom: 0;
z-index: 1;
background-color: pink;
padding: 20px;
}
<main>
<div class="content-container">
content
</div>
<footer>footer</footer>
</main>
I would suggest to use position:fixed for your footer.
For example:
footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
}
"fixed" means: relative to the view-port (and not relative to the nearest element with a position)
If I understand you, use a z-index
footer {z-index:0;}
.content-container {z-index:1;}
Currently your looks like this:
content-container is a div. It has explicitly set relative position to the document, since there is no node above with position: relative
after content-container there is a footer with position: absolute. Since there is no node with relative position above, it is absolute to the document
Based on what you write, footer overlaps content. And this is true. Because content-container and footer are positioned to the document, so are on the same level. That means they are rendered based on the document order:
Content container is rendered
Footer is rendered
Since that said, because footer is rendered last, it will overlap content container content.
To fix it you need to make sure footer will be rendered before content, or make sure whatever order they are rendered, footer will be rendered above.
To change rendering order you can just reposition container-content in the HTML code and place it after footer div.
But this is a fragile and troublesome solution.
There is fortunately a solution to this problem. You can explicitly indicate on what layer of rendering element should be. To do this you need to use z-index CSS property.
footer {
z-index: 1;
}
It tells browser that footer shoud be rendered above, way above other content elements.
Default value of z-index is auto. It translates to a value of 0. So if we set z-index to 1, node will be rendered above other elements on equal level without z-index being set.
I have a full-width cover image. Inside of that, I have a bootstrap container class with an absolute positioned image that sits on top of the cover image. What I would like to to do is have that image positioned to the right-hand side of the container only.
Here is my code:
<div id="header">
<div class="container">
<img src="header-icon.png" class="header-icon" />
</div>
</div>
#header {
background-image: url('cover.jpg');
background-size: cover;
height: 300px;
position: relative;
.header-icon {
position: absolute;
bottom: 0;
}
}
Of course, when I add right: 0 to the header-icon, it aligns outside the container. I could, of course, create media queries and try and position the icon based on screen size, but I'm wondering if a better way to do it exists.
I have also tried to make the icon relative to the container, but this seems to break what I am trying to achieve.
I'm not 100% sure what you are trying to achieve, but it sounds like you want right: 0 to align the image to the right of the container and not the header.
position: absolute will position an element absolutely according to the first parent element that is not positioned statically. Right now, you have #header with relative position, but .container still has static position. Therefore, you want to apply position: relative to the container:
#header .container {
position: relative;
}
Also, the code you posted seems to be missing a </div>.
Is this what you are looking for jsfiddle, this is the code i added
#header .container {
position: relative;
height: 400px;
}
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.