how can i do to make position:fixed work well - css

i have a div,
it's width is 200px ,height is 150px,
i want the style of div's position is fixed
To make it centered horizontally and vertically centered


Try this:
div{
position:fixed;
margin:auto;
left:0; right:0; top:0; bottom:0;
width:200px; height:150px;
}

Related

Position absolute div's in a bootstrap col

I try to position divs absolute in a bootstrap col-
red{
background-color:red;
}
.grid-item{
position:relative;
}
.about{
position:absolute;
left:20px;
top:20px;
}
.app{
position:absolute;
right:10px;
top:10px;
}
Here is my fiddle:
http://jsfiddle.net/nilssi/ah7m2k01/5/
The positions a good, but i would aspect a red background.

Try giving height and width to .red you can see that red color gets applied:
.red{
background-color:red;
height:200px;
width:200px;
}
DEMO

Fitting content to window height

I have this css:
html,body {margin:0;}
#nav {
height:30px;
background:#FFF;
background:red;
}
#content {
position:absolute;
left:0;
bottom:0;
top:30px;
right:0;
height:100%;
background:green;
}
I'm trying to have a nav bar at the top (the red part) and the content area underneath (the green part) should just fill the remaining space but as you can see the height is more than the window height creating a scroll. How can I overcome this?
jsFiddle: http://jsfiddle.net/2dcr5yty/5/

Don't use a height 100%. Use a bottom: 0. Because it will be 100% height of the container. Which is the body, so 100% body height means. covering the whole document if position top = 0. Since you have it 30px top. It will have a scrollbar for 30px.
Example: http://jsfiddle.net/2dcr5yty/6/
#content {
position:absolute;
left:0;
bottom:0;
top:30px;
right:0;
bottom:0;
background:green;
}

How to center a div with a specific width and fixed positioning?

I am coding, and trying to center my div horizontally in the middle of the page. It's just a plain div, with nothing inside of it right now. My code is this:
#wrapper{
width:500px;
height:100%;
position:fixed;
background-color:#fff;
}
Basically, I just want a 500px width white rectangle centered in the page horizontally, that takes up 100% of the page's height.
Thanks.

you can assign left:50% and after margin-left (width-of-div / 2), in this way you can center div in fixed/absolute position
try this:
#wrapper{
width:500px;
height:100%;
position:fixed;
background-color:#fff;
left:50%;
margin-left:-250px;
}
DEMO

You need to use left 50% and add a margin of negative half the width
#wrapper{
width:500px;
height:100%;
left: 50%;
margin-left: -250px;
position:fixed;
background-color:#fff;
}
If you are using this div as a container for a webpage I would recommend taking out position fixed and using margin: 0 auto; to center the div

z index and position relative

w3c Says that z-index "Only works on positioned elements(position: absolute;, position: relative; or position: fixed;)."
I see it works in absolute position: http://jsfiddle.net/WwXVV/2/
But why not in relative position: http://jsfiddle.net/WwXVV/
Can anyone explain why in relative position and in this specific case the div with the higher z-index is not on top?
CSS:
#top {
position:relative;
float:left;
width:100px; height:100px;
background-color:yellow;
z-index:1;
}
#bottom {
position:relative;
float:left;
width:100px; height:100px;
background-color:blue;
z-index:0;
}
HTML:
<div id="top"></div>
<div id="bottom"></div>

You are simply floating them next to one another. Apply left to the bottom div:
#bottom { left: -100px; }
What this will do is "position" the bottom div under the top one. Applying relative position by itself won't do anything, you need to start moving the target element around to see the stacking effect.
If you are wondering about absolute positioning, it works differently. Absolute positioning takes the element out of document flow (meaning it won't affect the layout of other elements), and by default puts it at the top left of its first ancestor that doesn't have a value of position:static, so both your elements stacked on top of each other.

You have floated both elements to the left. They don't overlap, hence z-index doesn't do anything.
If you add margin-left: -20px to the right box, you'll see the desired effect.

Simple, with position:relative and float:left; the divs will be next to each other. With position: absolute they will ignore float:left; and will put both element on the same spot, using z-index to show who is in front.
z-index is just relevant when the boxes overlap visually.

In case of Relative Positioning, z-index working fine. Try this code
#top {
position:relative;
top:20px;
left:0px;
width:100px; height:100px;
background-color:yellow;
z-index:1;
}
#bottom {
position:relative;
top:0px;
left:30px;
width:100px; height:100px;
background-color:blue;
z-index:0;
}
In case of Absolute Positioning
#top {
position:absolute;
top:0px;
left:20px;
top:0; left:0;
width:100px; height:100px;
background-color:yellow;
z-index:1;
}
#bottom {
position:absolute;
top:20px; left:50px;
width:100px; height:100px;
background-color:blue;
z-index:0;
}

unable to set minWidth and minHeight to main div

I have a div under body whose width:100% and height:100%,
now when i try to set min-width and min-height to my mainDiv, its not appling to div tag

.mainDiv{
width:100%;
min-width:100%;
height:100%;
min-height:100%;
position:relative;
top:0px;
right:0px;
bottom:0px;
left:0px;
}

Now used to this
body, html{
height:100%;
}
than give your
div{
min-height:100%;
}
Live Demo

Resources