I have a poblem with an element that is positioned relative. The problem is that I have a header with position fixed and content which is positioned relative. If I scroll down the content the element is put in front of the header. I tried with z-index but I just can't get it to work. I have put z-index:999 on header.
Here you can see my jsFiddle
Here is a picture:
The z-index on the relative positioned element should be lower than the z-index on the fixed position element. Here is a quick example:
HTML
<div id="fixed">Fixed Position</div>
<div id="relative">Relative Position</div>
CSS
body{
height: 3000px;
}
#fixed{
top: 0;
height; 100px;
background: green;
width: 100%;
position: fixed;
z-index: 2;
}
#relative{
position: relative;
top: 100px;
left: 50px;
height: 100px;
width: 100px;
background: red;
z-index: 1;
}
Working Example: http://jsfiddle.net/XZ4tM/1/
Fixing Your Example
The header styling has an issue, there are two colons :: proceeding the z-index properties value.
.header{
width:960px;
background: #43484A;
height:80px;
position: fixed;
top:0;
z-index: 9999; /* Removed extra : here */
}
Fixed Example http://jsfiddle.net/kUW66/2/
What I think you did is correct that using z-index in only a option. I have some work for you to understand.
Please follow the JS Fiddle link
HTML
<div id="header">Header</div>
<div id="content1"><div id="content2"></div></div>
CSS
body{
margin:0px auto;
color:#FFF;
}
#header{
background-color:#006666;
width:100%;
height:50px;
position:fixed;
text-align:center;
font:bold 12px Arial, Helvetica, sans-serif;
line-height:50px;
display:block;
z-index:10;
}
#content1{
width:70%;
height:1200px;
margin:0px auto;
background-color:#FFFF66;
position:relative;
top:50px;
z-index:9;
}
#content2{
width:50px;
height:250px;
margin:0px auto;
background-color:#F60;
postition:absolute;
left:50px;
top:50px;
}
Hope that helps.
"Content" is relative to the window, not the grey square.
Did you try to make that grey square position:relative?
Without the HTML and the CSS, it's really hard to know the real cause.
.categories li{
position:relative;
z-index:-1;
list-style: none;
float:left;
width:310px;
height:310px;
color:white;
background:#77647F;
margin-right:10px;
}
check this fiddle :)HERE
I have changed the z-index to -1 to make it work.
Related
I ran into a problem, while creating a column for messages on my website. Probably every message will be different lengths, so the divs' height contains them should be automatic. Somehow it is not working. Could you please tell me, which part of my code causes the problem? The container div doesn't expand with the content.
Here is the demo
CSS:
.ConvoCol2 {
width: 600px;
bottom:-50px;
position:absolute;
/*max-height:98vh;*/
margin-left: 0px;
height:91.95vh;
background-color:white;
display:inline-block;
padding-bottom:100px;}
.Typer {
width: 600px;
bottom:0px;
position:absolute;
/*max-height:98vh;*/
left: 0px;
height:100px;
background-color:black;
z-index:2;
padding-bottom:100px;}
.messageblock {
border: 1px solid lightgrey;
width: 600px;
position:relative;
top:0px;
left:0px;
min-height: 20px;
height:auto;}
.messageid {
left: 10px;
position:absolute;
top:10px;
}
.messageid p {
font-family:Arial;
font-size: 1em;
top: -15px;
display:inline-block;
position:absolute;
width: 200px;
font-weight:bold;
left: 65px;}
.msgcontent {
width: 560px;
font-family:Arial;
position:absolute;
left:30px;
top: 60px;
height:auto;
min-height: 30px;
word-wrap:break-word;}
.messageid img {
height:40px;
width:40px;
left: 20px;
}
HTML:
<div class="ConvoCol2">
<div class="messageblock">
<div class="messageid">
<img src="https://scontent-a-vie.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10849833_340959799423688_183902189805735256_n.jpg?oh=ea4fbcd056669d84e5459cd3918bf1c0&oe=550000F1" />
<p> Name Here</p>
</div>
<div class="msgcontent">
asdasdasdasdasdasdasdasdasdasdasdasdasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasaasdasdasdasdasdasdasdasdasdasdasdasdassdasdasdasdasdasdasdasdasdas
</div>
</div>
<div class="Typer">
</div>
</div>
Thank you.
The moment you use position:absolute or position:fixed it will be cut out and placed on a new layer (if you would compare it with how photoshop works), therefore your browser does not "know" the dimensions anymore and will simply give it 0 height when positioning the other elements. Or as #Terry commented:
It will remove elements from the document flow/layout and will not
interfere with the positioning of other elements, or the dimensions of
their parent(s).
position:absolute;
left:30px;
top: 60px;
Can for example be replaced with:
margin-left:30px;
margin-top:60px;
I have a sidebar with position:fixed; on the right side of my template. I also have an overlay for the whole page. I want one element out of the sidebar(a list element) to be marked as active and in front of the overlay.
I have an example on js fiddle:
http://jsfiddle.net/t93ew/
HTML:
<body>
<div id="fixed">
<ul>
<li class="active">Test</li>
<li>Test2</li>
</ul>
</div>
<div class="overlay"></div>
</body>
CSS:
#fixed{
position:fixed;
text-align: center;
right:0;
background:#fff;
height: 100%;
box-shadow: 0 0 5px 1px #888;
width: 100px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
z-index:10;
}
ul li{
background: #000;
}
.active{
background-color:#fff;
position:relative;
z-index:11;
}
If i use float:right; for the fixed sidebar instead of position:fixed; it works like a charm. But i need the position fixed because the sidebar needs to scroll with the page and have a 100% height.
Is there any way to have a z-index inside of a fixed element?
EDIT: Like Chris mentioned its only doesn't work in Chrome
This is actually a Google Chrome bug, if you try it in other browsers it should work.
If you set #fixed to position: absolute; then it won't be behind .overlay anymore.
I have a header created with two div containers, one #header-container and one #header:
#header_container {
background:#eeeeee;
border:0px hidden;
height:100px;
position:fixed;
width:1000px;
top:0;
margin: auto;
display: block;
}
#header {
line-height:60px;
margin:0 auto;
display:block;
width:940px;
text-align:center;
}
I am of course unable to have both "fixed" and "center", so how can I center the header while keeping the "fixed" property?
Thanks!
This should do the trick to horizontally center a div with fixed position, of which the width is not 100%:
position:fixed;
background-color:grey; /* optional */
height:100px; /* optional but useful for most of you, choose value you want*/
width:1280px; /* optional but useful for most of you, choose value you want*/
top:0px; /* optional but useful for most of you, choose value you want*/
margin-left:auto;
margin-right:auto;
left:0;
right:0;
More info here: http://www.w3schools.com/cssref/pr_pos_left.asp
If you add "left: 50%;margin-left: -500px;" to #header-container, it will center. Don't forget to place the margin-left behind the margin: auto;
So your code will be:
#header_container{
background: #eeeeee;
border: 0px hidden;
height: 100px;
position: fixed;
width: 1000px;
top:0;
left: 50%;
margin-left: -500px;
display:block;
}
#header{
line-height: 60px;
margin: 0 auto;
display: block;
width: 940px;
text-align:center;
}
Here's a fiddle:
http://jsfiddle.net/AJLZT/8/
Just use
#header { margin: 0 30px;}
This might help. You just need to add the margin-left tag in your code
#header_container{
width:1000px;
height:200px;
margin:10px;
background:orange;
position:fixed;
margin-left:350px;
}
#header {
line-height:60px;
margin:0 auto;
display:block;
width:940px;
text-align:center;
}
Here is the 100% cure for this problem in one go.
Here you go:
First, add the bootstrap in the "head" in "html"
Then in the header, add the class "container-fluid"
Then in the style section, type as:
header {
position:fixed;
top:0;
left:0;
right:0;
}
//boom!!! problem solved.
hello everyone i am designing a web page. i which i want a fixed header.
For this i set position: fixed;. but when i add a anther <div> in the web page and set some top margin for it then margin of header is also changed here is my CSS for header
#header {
width:100%;
height:35%;
color:#303030;
postion:fixed;
}
and the CSS for the div below header is this
#content {
width:250px;
height:350px;
margin-left:50px;
margin-top:75px;
border-style:solid;
border-color:#303030;
border-width:1px;
}
my html
<div id="header">
Predufu
</div>
<div id="content">
</div>
I add little part of my html in this question
now in #content i set margin-top: 75px; but with this the margin of header is also changed why it is happened please tell me i need a fixed header in my web page
I changed some of the CSS attributes and it worked. First I tried with position: absolute, but it also works with position: fixed.
#header {
position: absolute;
top: 10px;
left: 10px;
width:100%;
height: 100px;
color:#303030;
background-color: #aaa;
}
#content {
position: absolute;
top: 120px;
left: 50px;
background-color: #eee;
width:250px;
height:350px;
border: 1px solid 303030;
}
See here with position : fixed --> http://jsfiddle.net/NicHope/n32Mu/
Is it this you are looking for ?
Try to add its top position to header. Also your spelt position wrong.
try this:
#header {
width:100%;
height:35%;
color:#303030;
position:fixed;
top: 0px;
}
JSfiddle Example
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}