I have div which is position is fixed and another div inside the position fixed div which is position relative
<div class="wrap">
<div class="content">
</div>
</div>
css is:
.wrap{
position: fixed;
width:80%;
height:200px;
background-color:#a157df;
z-index:5;
}
.content{
position: relative;
width:30%;
height:100px;
background-color:#a1a7af;
left:80%;
z-index:1;
}
example is in this link:
how to place 2nd div inside 1st one, i used z-index but its not working
I do not think you need the z-index. How about this?
.wrap {
position: fixed;
width: 80%;
height: 200px;
background-color: #a157df;
}
.content {
position: relative;
width: 30%;
height: 100px;
background-color: #a1a7af;
left: 70%;
}
This is how the z-index works if you need it. http://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
I need a div to float within another div. Tried using position: fixed, but the div floats beyond the parent div now.
Here is the sample code.
I need the "Div to Float" to float inside "Div 1". now it floats outside 'Div 1' and go behind 'Div 2'
Here is the code.
.wrapper {<!--from www .j av a2s.c o m-->
width:100%;
height: 200px;
overflow-y: scroll;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
}
.element {
background:yellow;
position:fixed;
width:101px;
height:71px;
top:51px;
right:0px;
left:769px;
border:2px solid blue;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">Div to float</div>
</div>
</div>
<div class="container" style="margin-top: 30px; background: purple">Div 2</div>
What I've tried?
.wrapper {<!--from www .j av a2s.c o m-->
width:100%;
height: 200px;
overflow-y: scroll;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
}
.element {
background:yellow;
position:fixed;
width:101px;
height:71px;
top:51px;
right:0px;
left:769px;
border:2px solid blue;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">Div to float</div>
</div>
</div>
<div class="container" style="margin-top: 30px; background: purple">Div 2</div>
What I've expected?
I need the "Div to Float" to float inside "Div 1".
What is the result now?
Now it floats outside 'Div 1' and go behind 'Div 2'
.container {
position:relative;
}
.element{
position:absolute;
}
I don't fully understand what you mean by "float", but this code will place your div.element inside div.container
Position: Fixed
position: fixed; is positioning the element relative to the viewport, which means it always stays in the same place even if the page is scrolled.
Position: Sticky
position: sticky; is positioning the element relative until a given offset position is met in the viewport - then it "sticks" in place. When the user scrolls past the parent div, the element will stay with its parent.
Read more about Layout positioning
.wrapper {
width: 100%;
height: 200px;
overflow-y: scroll;
position: relative;
}
.container {
width: 301px;
margin: 0px auto;
height: 1501px;
background: green;
position: relative;
z-index: 2;
}
.second {
z-index: 0;
}
.element {
background: yellow;
position: sticky;
width: 90%;
height: 80px;
top: 50px;
right: 0px;
left: 769px;
border: 2px solid blue;
}
.fixed {
position: fixed;
top: 50px;
left: 0;
width: 50%;
z-index: 1;
}
<div class="wrapper">
<div class="container">
Div 1
<div class="element">I am 50px away from the top of my green parent, and I will stop being sticky when document gets scrolled away from my parent.</div>
</div>
<div class="fixed" style="margin-top: 30px; background: red">I am just gonna stay in this place forever cause I'm fixed. Using z-index on me or the elements will control whether I'm above or below any other elements.</div>
</div>
<div class="container second" style="margin-top: 30px; background: purple">Div 2</div>
Given 2 elements positioned relatively inside a relatively positioned parent, how do I get the elements to respect their z-index?
HTML:
<div class="content">
<img src="http://placekitten.com/100/100" alt="" class="preview">
<img src="http://placekitten.com/200/200" alt="" class="full">
</div>
CSS:
.content {
position:relative;
z-index:1;
outline:1px solid blue;
}
.preview {
z-index:1;
position:relative;
outline:1px solid yellow;
}
.full {
z-index:2;
position:relative;
outline:1px solid green;
}
JSFiddle: http://jsfiddle.net/2Nz2g/1/
I'm trying to get the .full element to be placed overtop the .preview element, so that basically .full elements position isn't affected by the .preview element at all.
I've tried floating the elements to no avail. Positioning absolutely is not an option as it totally throws off the position. Setting top:0;left:0 also has no effect.
I've had some cases where if an element is rendered after another, some browsers may ignore the z-index and draw them as they would do normally. In this cases you should set the z-index to a negative (<0) value to force them to be under the next elements:
Take a look at this fiddle, where all z-indexes are positive:
HTML:
<div id="first"></div>
<div id="second"></div>
CSS:
#first {
width: 200px;
height: 100px;
background: red;
z-index: 10;
}
#second {
width: 200px;
height: 100px;
background: blue;
position: relative;
top: -30px;
left: 40px;
z-index: 1;
}
Here the second div is rendered on top of the first one no matter what z-index I specify.
But take a look at this one:
HTML:
<div id="first"></div>
<div id="second"></div>
CSS:
#first {
width: 200px;
height: 100px;
background: red;
z-index: 10;
}
#second {
width: 200px;
height: 100px;
background: blue;
position: relative;
top: -30px;
left: 40px;
z-index: -1;
}
As you can see I only set the second element's z-index to -1 and now it's rendered properly.
This was tested on Google Chrome 35. You may want to check this bug on other browsers.
Is possible for you set a top / left /rigth positions to move the div
Css:
.content {
position:relative;
z-index:1;
outline:1px solid blue;
}
.preview {
z-index:1;
position:relative;
outline:1px solid yellow;
}
.full {
top:20px;
right:20px;
z-index:2;
position:relative;
outline:1px solid green;
}
http://jsfiddle.net/2Nz2g/4/
This can be fixed by using position: relative on the parent div and position: absolute on the images. This forces the images to be aligned on top of each other
JSFiddle: http://jsfiddle.net/yL5Sf/
When we have some absolute DIVs in page and one fixed DIV as a child of one of those absolute DIVs that has bigger z-index than those absolute DIVs, the fixed DIV goes behind of absolute DIVs!
Like this: http://jsfiddle.net/3qRaR/1/
HTML:
<div class='l1'>
<div class='data'></div>
</div>
<div class='l1'>
<div class='data'></div>
</div>
<div class='l1'>
<div class='data'></div>
</div>
<div class='l1'>
<div class='data'></div>
</div>
CSS:
.l1{
display: block;
width: 100px;
height: 100px;
background-color: yellow;
z-index:1001;
margin: 5px;
position: absolute;
}
.l1:nth-child(1){
left: 5px;
top: 5px;
}
.l1:nth-child(2){
left: 110px;
top: 5px;
}
.l1:nth-child(3){
left: 220px;
top: 5px;
}
.l1:nth-child(4){
left: 330px;
top: 5px;
}
.data{
display:none;
position: fixed;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:2000;
background: black;
}
.l1:first-child .data{
display: block;
}
Why?
How can I make it to go to the front of them?
Thanks
Remove the z-index from the .li rule and the black .data div will sit ontop of the yellow .li divs. I am assuming that is what you are trying to do?
.l1{
display: block;
width: 100px;
height: 100px;
background-color: yellow;
// Removed the z-index from here
margin: 5px;
position: absolute;
}
fixed makes divs fixed to document, not the element, even if it is absolute. Make .data divs of position absolute, not fixed.
http://jsfiddle.net/3qRaR/7/
.data{
display:none;
position: absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:2000;
background: black;
}
Edit:
If you want that fixed div to cover the entire document then just make the fixed div's container higher z-index than the rest:
http://jsfiddle.net/3qRaR/11/
.l1:nth-child(1){
z-index: 10000;
left: 5px;
top: 5px;
}
I have an element, which I have tried to place on top of another with this:
<div id="foo1"></div>
<div id="foo2"></div>
And this CSS:
#foo1 {
width: 600px;
height: 300px;
margin: 0;
}
#foo2 {
width: 600px;
height: 300px;
margin-top: -300px;
}
But now #foo2 is going underneath #foo1. How would I fix this?
Making them absolute instead of relative would do the job.
#foo1 {
width: 600px;
height: 300px;
margin: 0;
position:absolute;
z-index:100;
}
#foo2 {
width: 600px;
height: 300px;
margin-top: -300px;
position:absolute;
z-index:1000;
}
Just add position: relative; to each of the styles, as stated here: http://www.w3schools.com/cssref/pr_pos_z-index.asp
(They can both have relative positioning)
You can do it with positioning
#foo1 {
width: 600px;
height: 300px;
background-color:red;position:relative
}
#foo2 {
width: 600px;
height: 300px;
background-color:green; position:absolute; top:0; left:0
}
Demo here http://jsfiddle.net/fckrA/1/
You could place one div inside the other, and apply position: relative to parent and position: absolute to child. Child would appear above parent and aligned to top-left corner.
I would like to align a image in the middle. Very easy by giving the div a width and a margin: auto;. But the div should also carry the position: fixed; property, which doesn't go together as it turns out.
Here is my HTML:
<div class="header_container">
<div class="header">
<div class="header_links_icon">
<a href="https://www.facebook.com target="_blank" class="header_facebook">
<div class="header_facebook_icon"> </div>
</a>
<a href="https://twitter.com/" target="_blank" class="header_facebook">
<div class="header_twitter_icon"> </div>
</a>
</div>
</div>
</div>
And here is the CSS I'm using:
.header_container {
background-color: black;
padding-top: 35px;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
margin: auto;
width: 1440px;
position: fixed
}
And it's the header.png image that should be aligned in the middle of the screen AND being positioned fixed... How can I manage to do this?
You could make your header container fixed, then your .header would work:
.header_container {
background-color: black;
padding-top: 35px;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
margin: auto;
}
The other way would be with negative margins:
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
position: fixed;
left: 50%;
margin-left: -720px;
}
You have to set the left position to fifty percent and the margin-left to one half the element's width. This only works for items that have a set width.
http://jsfiddle.net/W9ZcY/
.header_container {
background-color: black;
padding-top: 35px;
border: 1px solid red;
}
.header {
border: 1px solid blue;
background: gray;
height: 105px;
left: 50%;
margin-left: -70px;
width: 140px;
position: fixed
}
The issue is that you can either position a fixed element with percentages or pixels. Neither of them will do the proper offset calculation to make it truly centered. So you must sortof hack the placement to make it behave properly.
Positioning by percentage and offsetting with negative margins:
//assuming the block is 200px wide and 100px tall
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Alternatively, you can center it by fixing placement of a container then center your object within that container (as mentioned by #rgthree), this also works.
This will probably work:
.center {width:1440px;margin:0 auto;}
.header {width:1440px;position:fixed;etc...} // don't use margin:auto here
where
<div class='header_container>
<div class='center'>
<div class='header'>
<!-- contents -->
</div>
</div>
<div>
Hi you can give the fixed position to the main header_container class so that will work.
.header_container {
background-color: black;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background:green;
height: 100px;
width: 500px;
margin: auto;
}
please see the demo:- http://jsfiddle.net/rohitazad/W9ZcY/17/
Give position fixed in your parent header class rather than using fixed position in header child class...
.header_container {
position: fixed;
top:0;
left:0;
right:0;
}