I have put my code into codepen to easy display my problem :
https://codepen.io/anon/pen/wrVMPy
<div class="card">
<div class="front">
<h1>03</h1>
</div>
<div class="back">
<p>test</p>
</div>
</div>
(needed to be able to post codepen link for some reason)
So, my problem is that the back of the "card", which has position absolute, wont display relative to my viewport. it locks to the bootstrap column instead. i want the red box to always show up right in the middle of the screen when the "card" is clicked but it seems impossible.
Not even position fixed takes it out from the flow and adjust it relative to the main div or viewport.
And also with a z-index of 99 it still doesn't go over the rest of the elements.
I would be too grateful if anyone has an solution to this. Thank you in advance.
That's because position: absolute positions the element relative to the first non-static positioned element. In order to make it positioned relative to the viewport you need to use position: fixed instead.
Related
HTML5/CSS3
A question for better understanding coding, Newbie
I fixed my header on top of the portview. It worked perfectly, but from now on i have to correct all following sections/divs to bring it in the position on the screen, i want to have it.
This behavior makes sense to me, because the position:fixed/absolute takes the element out of the flow.
But... is there a way to come into the normal flow again, so that i don´t need to tell every element with position: relative or absolute where it should stay? Is it a fact, that as soon i use position:fixed/absolute, i have to correct all following content/sections/divs?
How do you deal with such a situation?
This is not a big issue for me, but it blows up my code and makes it more ugly.If it is not unnecessary, i would like to aviod it...
you can position absolute according to parent position relative.
<div style="position:relative;background:#ccc;width:400px;height:400px;">
<div style="position:absolute;left:80px;top:50px;width:200px;height:200px;background:#000 ">
</div>
</div>
position fixed according to window page,elements fix in window's page.
<div style="position:fixed;left:200px;top:200px;background:#000;width:200px;height:200px;">
</div>
Just take fixed div in another div and for second one use property: overflow:hidden;
<div class="parent_fixed_div">
<div class="fixed_div">
</div>
</div>
CSS code:
.parent_fixed_div{
overflow:hidden;
}
.fixed_div{
position:fixed;
}
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.
I am developing html websites. Here is my code:
<html>
<body>
<div style="width:100%;height:50px;z-index:1;"></div>
<div style="width:100px;height:50px;z-index:2;position:relative;top:-50px;"></div>
<div style="width:10px;height:50px;z-index:3;position:relative;top:-100px;"></div>
</body>
</html>
The code here is very simple. I intend to group the 3 elements into one line. However, the spaces under the element at their original position are reserved. How can I remove the white spaces under?
That's because you're using relative positioning. In order for relative positioning to work, the browser has to load the DOM first so it knows the original location of the element, it can then apply the positional values to move it, this means the document will not re-flow around the positioned elements hence your white space. The quickest fix is to wrap your div stack in a relative positioned div, then apply absolute positioning
<div style="position:relative">
<div style="width:100%;height:50px;z-index:1;"></div>
<div style="width:100px;height:50px;z-index:2;position:absolute;top:-50px;"></div>
<div style="width:100px;height:50px;z-index:2;position:absolute;top:-100px;">/div>
</div>
You'll have to play with the inner div positional values, but that should work for you. The wrapping div with relative position set makes the absolute positioning use that div as the parent, rather than the body element, so in your example it is not required, but in the real world, you'll probably want to do this.
However, i'd consider whether a <ul> elemnt would be more appropriate in this scenario
relative positioning reserves the space where the element originally would have been placed. Use position:absolute instead. However, absolute positioning works differently. While relative takes coordinates "relative" to the element's original position, absolute takes coordinates relative to the parent* element's position.
*: The nearest ancestor with position other that static or if none is present, the body. In your case it would be the body.
Example:
<html>
<body>
<div style="position:relative">
<div style="width:100%;height:50px;z-index:1;"></div>
<div style="width:100px;height:50px;z-index:2;position:absolute;top:0;"></div>
<div style="width:10px;height:50px;z-index:3;position:absolute;top:0;"></div>
</div>
</body>
</html>
Sidenote: avoid inline styles and your markup is broken - you are missing a <.
See the demo
I have an absolute div as the main content area on my page design. I have another div that occupies the top portion and which is 450px in height. I cannot know the height of absolute div before page load, so will only be able to find it out after page load has happened.
Now the problem is that my body also occupies 450px (height), so if I want to display something after the absolute div has ended I am unable to do so.
Summary :
Absolute Div : 600px (for example, don't know the actual height) Has position:absolute.
Top Div : 450px (No position:absolute)
Body Becomes 450 px as expected
How do I place a div below the absolute div. Currently the only thing I can think of is jQuery.
Here is a jsfiddle I made to the illustrate the problem. Even though the whole body displays blue, if you fire up the developer tool and inspect, you'll see that the html and body both occupy
UPDATE : Linky I'm trying to display the main content area above a few elements. Those circles that you see are seperate elements. And they need to stay that way.
I think you need to learn more about the positions!
Anyhow the current problem you are referring to will be solve if you change the position to relative!
<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;">
</div>
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;">
</div>
But if you really need to place it somewhere static or in another word "absolute", then you need to place a container div and set the position to absolute, then place the other two or even more or inside the container Div.
<div id="container" style="position:absolute; top:y; left:x">
<div id="FirstDiv" style="position:relative;></div>
<div id="SecondDiv" style="position:relative;></div>
</div>
You can use jquery to append tags to your container. here is the sample link to do it!
If it didn't help try the height:auto and also overflow:visible for your container!
I have a big div with a big background-image. Now I want to create some div's and to put them over some elements in the background image, then use qTip2 to give some explanations. In the middle I want to put a form.
<div id="bigdiv" style="background-image:url('back.jpg')">
<div id="qtipbox1"></div>
<div id="qtipbox2"></div>
<div id="form"></div>
</div>
The problem is: if I use position relative for the qTip boxes the form goes down. If I use absolute position, results are different as I resize window.
What do I have to do?
It'd help if you'd share the relevant code or (even better) put up a sample on JSFiddle.
Anyhow, you use position: relative on the container div with the big background image and then use position: absolute on the elements inside. That way, they should be absolutely positioned relatively to the container.