Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm trying to figure out how to clear or reset the relative positioning of an element on my page. I have an element with position:relative, and further down the tree a bit a dialog box div is defined along with a background image that is stretched to fill the page to make the dialog box modal.
The problem is that b/c there is a position:relative further up the DOM tree, when I say top:0, left:0 for the background image, it goes to 0,0 relative of that element rather than going to 0,0 of the page.
How can I clear or reset the relative positioning so that the absolutely positioned background image can be set to 0,0 of the page?
In most cases, your modal should be a direct child of the body.
If the modal has an ancestor with relative or absolute positioning, you cannot "undo" that short of changing the style on the offending element.
HTML:
<html>
<head>...</head>
<body>
<div id="content">content!</div>
<div id="someModal" class="modal" style="display:none"></div>
</body>
</html>
CSS:
.modal {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
We would love to see your code first, but probably you're looking nto this:
position: absolute !important;
Well, an absolutely positioned element that is set at (0,0) will ALWAYS got to the (0,0) corner of its closest parent element that is position relative. This is the defined behavior and cannot be altered.
Since you are absolutely positioning the modal, I'd suggest pulling out out of the relatively positioned element and just sticking it under either (a) a non-positioned parent, or (b) just after the body tag.
EDIT: Johnathan beat me to it!
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Divs on for my site:
Header
Banner (inside the banner div: is another div call innerbanner )
Main Content
Second Content
FooterWrap
I have several divs tags on a site I'm trying to develop, and 2 of the div tags I'm using an absolute position ( 1 for Banner and the 2nd one for the Footer), however when I use the absolute positioning for the banner it pushing my main content div upward making it invisible, but my footer doesn't have that problem. Can you assist me?
Absolute Positioning Inside Relative Positioning
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
if you want to set a div absolute position make sure that the div which contains it has a relative position so it won't get out of the box and disorder the elements, try this for example:
html:
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
css:
.container{
width:75%;
height:500px;
border:1px black solid;
position: relative;
}
.box1{
width:50px;
height:50px;
border:1px solid red;
position:absolute;
top:0;
left:0;
}
.box2{
width:50px;
height:50px;
border:1px solid green;
position:absolute;
bottom:0;
right:0;
}
http://jsfiddle.net/ahmedskaya/DZ2DF/
Please check by defining some height to your parent div of absolute positioned (banner) div in css. This might be the reason of content div pushing upward. Since parent of absolute positioned div don't draw height automatically or by absolute positioned content, and collapsed to its minimum height.
So you might need to define certain height of your parent div in your css in order to make it cover the height area of your absolute positioned div.
Also since your content div would (probably) have normal content (not positioned absolutely) it would be drawing height like a normal div with them. And so footer div couldn't push upside beyond its height.
This should fix your issue.
I have 3 divs:
(blue) containing div with position: relative
(red) div with overflow: hidden, floated left
(green) div with position: absolute that I want positioned relatively to the first div.
see jsfiddle.
I want the green div hidden outside the red div, so making the overflow: hidden work without positioning it, because I want the green one positioned relative to the blue one.
I found some similar questions, but none that really fit this same case.
You are on the right track, but you need to make the red div have relative positioning.
Right now, your green div is being positioned absolutely relative to the blue one, but as long as that is happening, it is bound by the overflow rules of the blue one, not the red one.
When you use absolute positioning, the positioned element is bound by the overflow of the nearest parent element with relative positioning, ultimately the window if no others exist.
.two{
background-color: red;
overflow: hidden;
float: left;
position:relative;
}
JSFiddle
I believe this is impossible using only css. You could make it look like what your talking about using javascript or jquery fairly easy, but I wasn't sure if you wanted an answer in that form.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a div at the bottom at a page. it's not bound by any other div. How would I manage to align it, a bit off center, with the main div. And place it at the top of the page, when the page has different heights and the div has to have a z-index:1;
The two divs top has to be aligned, one cannot be higher than the other.
The html
<body>
<div id="Main"><div> //Css or html for this div can not be edited
<div id="Our_hero_div"><div> //This has to be show ontop of main, but a bit off-center
</body>
CSS
#Our_hero_div{
z-index:1; //this much remain
}
#main {
margin:auto;
}
If you cannot get that #Our-hero-div INSIDE of the #main div, and if you cannot edit the CSS of the #main div, your options are limited. You can try to give it an absolute position and align its top with the top of the #main div using the css top property.
#Our-hero-div {
position: absolute;
top: 1em; /* assumes the #main div has a margin top of 1em - just match this value to whatever the margin/padding of the #main div has on top */
}
You'll also need to use left or right to position horizontally (for that off-center thing you're after). This solution only works if that #main div is really at the top of the body. If there's other stuff that changes height above #main, then this falls apart.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Sometimes you want to make an entire div (or other element) into a clickable link. Here’s an example.
Here’s a cross-browser way to do it using pure CSS:
HTML:
<div class="clickable">
Rest of div content goes here
</div>
CSS:
div.clickable { /* Containing div must have a position value */
position:relative;
}
div.clickable a {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */
filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
First, give the containing div position. That way, when we apply “position:absolute;” to the link (see next paragraph) it will position itself relative to the containing div.
Next, make the link absolutely positioned and the full size and depth of the containing div. The link’s z-index makes sure it’s above everything else in the div, so no matter where you click, you’re clicking the link.
IE, naturally, has quirks. In this case, IE requires a background color for such a link to be clickable, so we give it a background color (white), set the opacity to 0, then give it an IE-only opacity of 1% using IE’s proprietary filter property.
Finally, put whatever content you want in the div. If you’re going to be layering the content using z-index, just make sure not to give any element a higher z-index than the link.
You can wrap a div in a link and it is valid HTML5.
<a href="#">
<div></div>
</a>
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 8 years ago.
Here is a fiddle with it centered, but the image with position:relative instead of position:absolute.
Here is another fiddle with it positioned absolutely, but not centered.
Note that the image has a variable width.
The reason the image must be centered is because I want to fade one out while another is fading in behind it.
Any ideas? Thanks!
A better solution would be to not use the CSS position property at all.
Try displaying the images as block elements, and tell the browser to use an auto margin on left and right.
#imagesContainer img{
display:block;
margin:0 auto;
}
Proof of concept fiddle (border added just so you can see that the image is in fact centered):
http://jsfiddle.net/9nkDS/5/