Absolute div keeps showing up above the other divs, while is should appear underneath;
here is a quick demo:
http://jsfiddle.net/hvP8c/2/
<div id="logo">
<h1></h1>
<div id="line"></div>
</div>
#logo {
position: relative;
}
h1 {
width: 60px;
height: 60px;
border-radius: 50%;
border:1px solid #000;
background-color:#eee;
z-index:100;
margin:0 auto;
}
#line {
border-bottom:1px solid #033e5e;
position:absolute;
left:0;
top:30px;
width:100%;
z-index:1;
}
In this demo, the line should go below the circle. I tried to play with z-index but it didn't have any effects.
z-index only applies to positioned elements. Since the h1 (which appears to be the "other div" you are talking about) is position: static it won't apply there.
Set position: relative on the h1
You have to set position: relative or position: absolute to h1
Change z-index for #line from 1 to -1:
#line {
z-index: -1;
}
Demo: http://jsfiddle.net/hvP8c/4/
Beware that it may not work on IE6/7. OK in IE8.
just do => z-index:-1; of the id '#line'
Related
I have the following problem:
I have a father-div, that's position is "relative". Inside this div I have 2 son-div's. The first son-div should be positioned relative to the father-div. But the second son-div should be positioned to the whole browser-window.
My HTML and CSS:
#father
{
position:relative;
}
#son1
{
position:absolute;
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
My problem now is, that the son2-div is also positioned relative to the father-div.
Is there any possibility to tell the son2-div, that it should inerhit the "position:relative" of the father and make left and top absolutely absolute to the whole window?
My problem is: I should change this inside a very big, complex HTML-structure, so it's not possible for me to change the HTML-structure.
First change
#son2
{
position:absolute;
left:670;
top:140;
}
to
#son2
{
position: fixed; /*change to fixed*/
left:670px; /*add px units*/
top:140px; /*add px units*/
}
Result:
#father
{
position:relative;
margin: 40px auto;
width:200px;
height: 200px;
background: red
}
#son1
{
position: absolute;
left:0;
top:0;
width:20px;
height: 20px;
background: black
}
#son2
{
position:fixed;
left:70px;
top:140px;
width:200px;
height: 200px;
background: green
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
This is unfortunately not possible without changing the HTML structure. An absolute positioned div will always position itself according to its first relative positioned parent.
What you could possibly do however, is change your #father element's width/height so you can still position your #son2 element correctly. This really depends on your layout and how far you can edit the #father element without destroying the layout. Or if possible, change your CSS so you do not need position: absolute; on #son1 (after which you can remove the position: relative; from your #parent).
You should keep your 2nd son div outside of your father div.
#father
{
background-color: blue;
width: 200px;
height: 200px;
}
#son1
{
position:relative;
left:0;
top:0;
background-color: red;
width: 50px;
height: 50px;
}
#son2
{
position:absolute;
left:670px;
top:140px;
background-color: yellow;
width: 50px;
height: 50px;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
Don't need to use position: relative; for parent div
son1 should be position: relative; for your aim.
I highly suggest use background-color and width , height to see the position of div on your page.
Also there is a simple mistake in your code:
left:670;
top:140;
You should specify the measurement unit;
left:670px;
top:140px;
Your div#son1 is already positioned to div#father by default (static position). You don't need to set any positions to them.
#father
{
/* don't set position. it's static by default */
}
#son1
{
/* don't set position. It's positioned to #father by default */
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
Also, if you want your div#son2 to be positioned to the window (user visible area), but not the root element (body), you should set div#son2 to fixed
See this video for more details about fixed position.
https://www.youtube.com/watch?v=nGN5CohGVTI
My outer div is position:relative and inner div is positioned absolute.
I want to set my inner div center align vertically and thinking to use top:auto and bottom:auto but it is not working. Please advice me how it can be done.
div.Container div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
height:95px !important;
position:relative !important;
}
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:auto;
bottom:auto;
right:0px;
}
<div class="Right">
<div class="header-search">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
You can use line-height:95px; in the outer div and vertical-align: middle; in the inner div like this:
div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
line-height:95px !important;
display: block;
}
div.header-search
{
overflow:auto;
border:0px dashed blue;
vertical-align: middle;
}
You can play with it here: http://jsfiddle.net/leniel/5Mm67/
If you want to horizontal align the content of the inner div, just add this in div.Right:
text-align: center;
Here's the result: http://jsfiddle.net/leniel/5Mm67/1/
the best way to achieve what you are after would be to remove the bottom:auto; style and replace the top:auto; with top:50%; . After that work out the height of the search bar that you are trying to center (say its 20px) and add a negative margin styles for half of its height, so if it was 20px the style would be margin-top:-10px;
your css would look like this:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height:20px;
margin-top:-10px;
right:0;
}
set .header-search to top:50% or bottom:50% then use margin-top:-(half of div height) or margin-bottom:-(half of div height); respectively. I also sometimes just simply use top:50% or bottom: 50% without the negative margins.
For example:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height: 500px;
margin-top:-250px;
right:0px;
}
So yeah, in this case you would have to set a fixed height.
Set in the div with position absolute: "top:50%;"
It will display the div a litle bit to low (top od the absolute div should be exacly on the 50% of parent height - relative div) but there are ways to go around this.
For example:
Do even one more div with position relative and move it higher with half of absolute div height (this doesnt look very nice in code) - You must know the divs height, if you dont you can measure the size in sth like jQuery and move div a litle higher.
Easiest way: Maybe try 45% instead of 50% (if its not pixel to pixel design).
Propably somebody has better solutions, if so I would like to see them to :)
This should work:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
right:0px;
}
Hie, there are several methods to vertical centering of div its done through the magic of CSS.... Here is the examples and it works fine i have tested... and it works fine.
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
CSS:
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Here is other methods click here to see complete reference
Hope, it will helps you. Cheers. !!
Try setting the inner div to margin: auto 0;
Take a look at this screenshoot first:
That white box is ON the orange background, I want it to be under it exactly as pointed with the arrow. The rest should be visible of course: it should just hide this from being on the orange background.
Here is the orange background style and the white box itself:
Orange background:
body {
margin: 0;
padding: 0;
background: url("../img/back.png") repeat-x top #fff;
text-align: left;
color: #8a5225;
}
White box:
#box {
background: url("../img/box.png") no-repeat;
width: 163px;
height: 41px;
float: right;
position: relative;
}
Hope you give me some solutions for that. I've been trying using the z-index but it doesn't bring any results...
You won't be able to do this based on your current html structure. Z-index only works for positioned elements. ie relative, absolute or fixed. You won't be able to apply these to the body element. You can try, but I tried and it didn't work. Instead put the orange background into another div and draw the lower one up under it.
http://jsfiddle.net/5bsty/
<div class="one">First div</div>
<div class="two">Second div</div>
div.one {
background: #c74d12;
z-index: 3;
position: relative;
}
div.two {
position: relative;
top: -10px;
z-index: 1;
background: white;
}
use a z-index and you should be done.. give the orange background a higher z-index
I think you look like this
You take two div and parent div define position relative and child div define absolute properties and z-index is compulsory .
css
div.one {
background: #c74d12;
position: relative;
z-index:2;
}
div.two {
position: absolute;
top:11px;
background: green;
left:0;
right:0;
z-index:1;
}
Html
<div class="one">First div</div>
<div class="two">Second div</div>
Check to live demo http://jsfiddle.net/rohitazad/5bsty/3/
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_zindex
Reffer this..:( ?
Hi again, this time the problem is with css, I' have a custom object (black rectangle named container) that contains items (red rectangle), each item must contain a litle rectangle (blue) named flag. Until here everithing ok.
here is the css properties:
.container
{
overflow:visible;
position:absolute;
border:0px solid;
border-color:Black;
width:500px;
height:500px;
}
.Item
{
overflow:visible;
border:0 invisible;
position:absolute;
z-index:100;
margin-top:1px;
}
.Flag
{
position:absolute;
width:20%;
height:20%;
margin-left:80%;
margin-top:80%;
z-index:98;
opacity: 0.5;
}
And Here is my Html
<div class="Container" id="CondicionesMostrar" style="left: 0.31em; top: 0.31em; width: 84.75em; height: 44em;">
<div class="Item" id="I_Cond_1" style="left: 0.06em; top: 0.06em; width: 216px; height: 120px; border-width:thick; background-color:Black;" onclick="alert(Hello');">
<div class="Flag"></div>
</div>
</div>
The problem is when the size width is greater than height the flag appear out of Item like the image A and if the height is greater than width it appear as the image B. The Item might have different sizes, the tests was made in Firefox 10.0.2, chromre 17.0.963.79m and IE 9, all of them return the same result.
What is the current way to do this? There is anything bad on my css?
I'm using absolute positions because i need to populate Container with many Items.
There is an alternative to perform this task?
Very tks for your help.
on .Flag, remove:
margin-left:80%;
margin-top:80%;
and change it to:
bottom: 0;
right: 0;
Joseph is right, I'm only adding that if parent div you also should use left and top position.
.container
{
position:relative;
border:1px solid #000;
width:500px;
height:500px;
}
.Item
{
position:absolute;
z-index:100;
top:1px;
left: 0;
}
.Flag
{
position:absolute;
width:20%;
height:20%;
right:0;
bottom:0;
z-index:98;
opacity: 0.5;
}
Alright, so I've got a couple divs wrapped in a container. The two interior divs overlap each over by 15px; The problem is I'm not able to layer them like I want.
<div class="headerButtons">
<div id="WorkTableButton" class="WorkTableButtonActive">
Work Table
</div>
<div id="additionalCostsButton" class="additionalCostsButtonInactive">
Additional Costs
</div>
</div>
and the CSS looks like so,
.headerButtons{
margin:auto;
text-align:center;
}
.headerButtons div{
text-align:center;
height:27px;
text-indent:-9999%;
display:inline-block;
cursor:pointer;
}
#WorkTableButton{
width: 195px;
}
.WorkTableButtonActive{
background: url(ui_images/WorkTableActiveButton.png) no-repeat;
z-index:99999;
}
#additionalCostsButton{
width: 192px;
position:relative;
left: -15px;
}
.additionalCostsButtonInactive{
background: url(ui_images/AdditionalCostsInnactiveButton.png) no-repeat;
z-index:0;
}
The problem is, the #WorkTableButton div still shows up behind the #additionalCostsButton even though the WorkTableButtonActive class is applied to it which layer the div above the other... Right?
What am I doing wrong?
The z-index property only works on elements that have been specifically positioned.
You need to add a position to your #WorkTableButton, like this:
#WorkTableButton{
width: 195px;
position: relative;
}
#additionalCostsButton will appear behind #WorkTableButton after that.
Change
#additionalCostsButton {
left: -15px;
}
to
#additionalCostsButton {
margin-left: -15px;
}