I have a page layout, where I have to set the position of a div relative and top:-30px
The DIV is positioned relative and top:-30 exactely.
But the following DIV then 30px distance at the top. Is there a way to fix this problem.
position: relative doesn't do what I think you think it does. It means that absolutely positioned elements within it are positioned relative to the relative div and not to the page. For example:
<div id="header">Header</div>
<div id="content">
<div id="c1">Content One</div>
<div id="c2">Content Two</div>
</div>
with
#header { position: absolute; top: 0; left: 0; height: 150px; width: 100%; }
#content { position: relative; margin-top: 150px; height: 500px; }
#c1 { position: absolute; top: 0; left: 0; }
#c2 { position: absolute; top: -50px; left: 0; }
c1 will be at the top of the lower div, not the top of the page. content will be 150 pixels from the top of the page. c2 will be above it due to the negative top. header will be at the top of the page.
Make it position:absolute; and its parent position:relative;
This should work :)
Related
Playing around with some absoloute divs I have in my header. logo, search bar etc and trying to get them centered.
Will margin: 0 auto; ever work with an element set as absolute?
I know of some options to center divs within a 100% width such as calc, transform, flex. Are there any more centering 100% options?
Yes, it will work if the element is positioned correctly and has a width specified.
In the example below, left: 0/right: 0 is added so that the element is centered relative to the parent. For instance:
.container {
position: relative;
}
.absolute {
position: absolute;
width: 80%;
height: 40px;
background-color: #000;
margin: 0 auto;
left: 0;
right: 0;
}
<div class="container">
<div class="absolute"></div>
</div>
Alternatively, you can also use a combination of left: 50%/transform: translateX(-50%) in order to center the element horizontally.
.container {
position: relative;
}
.absolute {
position: absolute;
width: 80%;
height: 40px;
background-color: #000;
left: 50%;
transform: translateX(-50%);
}
<div class="container">
<div class="absolute"></div>
</div>
I want to fix position of div with respect to it's container div, NOT with respect to body. I played a lot and searched as well but didn't find the solution.
Please not .container and .content both are of responsive height and can't take a fixed height. height:2000px; given to .container for demontration purposes only.
While the actual case is: heights are responsive. Here is jsFiddle
<div class="content">content<br>content<br>content<br>content<br>content
</div>
<div class="container">content
<div class="loaderWrap">
<div class="loader2">Loading Spinner</div>
</div>
</div>
CSS:
.content {
background:green;
}
.container {
position: relative;
background:orange;
height:2000px;
}
.loaderWrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: red
}
.loader2 {
position: fixed;
top: 50%;
left: 50%;
}
The question is: is it possible? I have a div with relative position. Inside this div, I have another div with position: absolute and top: whatever.
This absolute positioned div overlaps content in parent div without any problems, but another relative position div (outside parent) doesn't even care. Before this question I googled as I much as I could, so I'm for 90% sure that it's impossible, or I'm on a wrong way, but I need to be sure.
Here is an example http://jsfiddle.net/MNLbZ/2/
HTML
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main"></div>
CSS
.main {
background: green;
position: relative;
height: 100px;
width: 100px;
z-index: 100;
}
.content {
position: relative;
z-index: 500;
width: 100px;
}
.abs {
position: absolute;
width: 50px;
height: 300px;
top:0;
right: 0;
background: red;
z-index: 999;
opacity: .5;
}
The z-index of the second .main div must be lower than that of the first div that contains the absolute div:
add a class to the second main
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main second"></div>
then use this style:
.second {z-index:99;}
Example
I have a div element wrapping other div elements like so:
<div style="overflow:hidden">
<div id="a"></div>
<div id="b"></div>
</div>
I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.
What is the best way to achieve this?
Method 1
A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:
.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.
Method 2
Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:
http://jsfiddle.net/kv0bLpw8/
#wrapper {
width: 400px;
height: 50px;
position: relative;
z-index: 1000;
left: 0px;
top: 0px;
}
#wrapper #insideDiv {
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
z-index: 2000;
left: 0px;
top: 0px;
}
#wrapper #a {
position: absolute;
height: 30px;
width: 100px;
bottom: -40px;
z-index: 1000;
left: 0px;
}
<div id="wrapper">
<div id="a">AAA</div>
<div id="insideDiv">
<div id="b">BBB</div>
</div>
</div>
The easiest and most convenient way is to wrap your container div inside another div and set position: relative on the external div.
.outer-container {
position: relative;
height: 50px;
}
.container {
background: gray;
overflow: hidden;
height: 50px;
}
#a,
#b {
height: 100px;
width: 100%;
}
#a {
background: green;
position: absolute;
top: 60px;
}
#b {
background: red;
font-size: 60px;
}
<div class="outer-container">
<div class="container">
<div id="a"></div>
<div id="b">Cut off</div>
</div>
</div>
as people said, the element must be presented outside the parent in order to be not cropped. But you can do this with JavaScript to achieve the similar concept without having to change your actual markup:
function breakOverflow(elm) {
var top = elm.offset().top;
var left = elm.offset().left;
elm.appendTo($('body'));
elm.css({
position: 'absolute',
left: left+'px',
top: top+'px',
bottom: 'auto',
right: 'auto',
'z-index': 10000
});
}
then pass the element you want to exclude from the cropping of its parent:
breakOverflow($('#exlude-me'));
I have a GoogleMaps on my website.
My problem is CSS, how to do a CENTERED div that is positioned over Google Maps?
<div style="position:relative">
<div style="width:300px; height:300px" id="map_localization"></div>
<div style="position:absolute; width:100px; margin:0px auto;">CENTERED</div>
</div>
This is what almost works for me, but need to put the CENTERED layer OVER the map
Can you reveal some code?
I would do it by putting both the map and the div to be centered within a relative positioned div. Then I would absolute position both the map and the div inside.
I would center the div inside with absolute positioning: http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
Specifically, the CSS of the div to be centered would look something like this.
#divToBeCentered {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
Update
Actually, this fiddle I made illustrates what I meant by putting both the map and another div in a containing div:
http://jsfiddle.net/2zaxd/
Here's the HTML (similar to what you had).
<div id="containerForAll">
<div id="map_localization"></div>
<div id="divToBeCentered">CENTERED</div>
</div>
and the CSS.
#containerForAll, #map_localization, #divToBeCentered {
border: 1px solid #000;
}
#containerForAll {
position: relative;
width: 300px;
height: 300px;
}
#map_localization, #divToBeCentered {
position: absolute;
}
#map_localization {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#divToBeCentered {
width: 100px;
height: 100px;
margin-left: -50px;
left: 50%;
top: 50%;
margin-top: -50px;
}
This centers the inner div above your map via absolute positioning.