I have an absolute div inside a relative div. It's essentially a container for a absolute positioned corner banner, on the top right side of the page.
It works fine with Chrome, but not with IE. In IE it appears positioned absolutely, but inside its container. I'd like to override this, if possible, due to the way this site is built (complete template on a CMS):
#corner-banner a {
position: absolute;
right: 0;
top: 0;
display: block;
height: 200px;
width: 200px;
background: url(../images/down.png) no-repeat;
text-indent: -999em;
text-decoration: none;
}
#corner-banner a:hover {
background: url(../images/up.png) no-repeat;
}
Thanks for reading and for any input.
Cheers!
That is correct behavior. Absolute position inside a relatively positioned element will be absolutely positioned relative to the containing element.
Are you sure that the parent relative container is a div and not a td ?
EDIT
ok
This is not a CSS problem, but a bad HTML organization.
So, if you want your element to be positioned by the window, and not by his relative parent coordonates, you must put it outside the relative element.
Something like that :
<body>
<div id="corner-banner" class="norelative_element">
<!-- Your content with absolute position by the window !-->
<a>...</a>
</div>
<div class="relative_element">
<!-- Your content with relative position !-->
</div>
</body>
Related
In the given code, in div.text section when I assign position: absolute then the display: block property becomes inactive and I have to set width: 100% to align the text in the center. What's the reason?
Why do I have to first set the position property to relative of the container in order to set the position of the child element to absolute? If I don't set the position: relative of the parent container then the element is positioned with respect to the body tag. Why?
body,
html {
height: 100%;
margin: 0;
}
div.first-div {
background-image: url(louis-lo-275893-unsplash.jpg);
height: 100%;
opacity: 0.7;
background-size: cover;
position: relative;
}
div.text {
position: absolute;
top: 45%;
left: 0;
display: block;
width: 100%;
text-align: center;
}
span.border {
color: cornsilk;
font-family: "Lato", sans-serif;
letter-spacing: 8px;
font-size: 50px;
background-color: black;
padding: 8px 30px;
height: 100px;
}
<body>
<div class="first-div">
<div class="text">
<span class="border">Hello</span>
</div>
</div>
</body>
Why do I have to first set the position property...
The default value of the position is static, which displays elements as they appear, or in other words: not positioned. Absolute positioning will place an element relative to its first positioned (not static) ancestor element. If nothing is positioned, the <body> or topmost element is it. That's where the need for setting parent position to relative comes from. Going from static to relative makes it "positioned" and now child object with absolute position will tie to its ancestor and not <body>. from https://www.w3schools.com/cssref/pr_class_position.asp
...I have to set width: 100% to align the text in the center. What's the reason?
When you remove position: absolute style from div.text it does not affect display:block (block, as opposed to inline, means the element doesn't "like" being next to other elements) <div>s or divisions are block elements and <span>s are inline. So setting display:block on any <div> is redundant. Setting the width to 100% makes the <div> occupy the entire line instead of a default: as little space as necessary. Not specifying width doesn't cancel text centering, it's just centered inside the <div> that fits perfectly.
1.The reason behind given width in absolute position is the default position of absolute and relative is left,top so we have to specify the width to perform any center alignment action. also no need to give display block property to the class, it's by default block, if your are performing some toggle action then you have to apply that property to any css.
When ever we are applying absolute position to child div it is necessary to assign the relative position to the parent, because of doing this we are restrict the are for absolute position action, if we are not applying position relative property to the parent, child css have some top, bottom, left, right property then it will show some where in body of html.
For better understanding of css position property please follow the attached link to understand the nature of position property.
enter link description here
I have a site with an absolute positioned logo div on the top. It's parent is a relative div with 100% width.
I managed to get my position:absolute div where I want with next code:
css:
position:absolute;
top:0;
left:50%;
margin-left:-455px;
background:url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png');
width:206px;
height:99px;
z-index:999;
However I ran into problem: when the browser window width is less than the site width, the logo starts to move to the left side of screen.
My question:
How do I absolutely position my div related to the center of the site page, in other words I need my logo to be positiond X px away from the middle of the site...
The parent of the #headlogo element on your site is #wrapper and it is not relatively positioned.
You should therefore add
#wrapper{
position: relative;
}
Or put the #headlogo inside the #header element which is relatively positioned.
The reason that requires the above change (position: relative; in a wrapper element) is that absolute positioning will only function if the first parent element is NOT static (default). If it's anything other than static, it should function correctly!
You can do it easily with jQuery.
$(function()
{
var logo_width = width of your logo;
var window_width = $(window).width();
$('#id_of_your_logo').css('left', window_width / 2 - logo width / 2);
}
That should do fine :).
I took at the link of your site. One option is if you put your .headlogo inside the #header div instead (as below):
<div id="header">
<div class="headlogo"></div>
<!-- rest of the #header content here -->
</div>
...then change your css to:
position: absolute;
top: 0;
left: 0;
margin-left: 25px;
background: url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png');
width: 206px;
height: 99px;
z-index: 999;
Because your #header div as position:relative, any position:absolute div inside of it will be relative to it rather than the body. Therefore, when the window size reduces, it will still be relative to the header, not the body.
I've got a div that sits inside another div and it's supposed to float above all of the other content in the div, and stick to the right of the div. To achieve this I had to set the div positioning to "Absolute" since when it is set to "Relative", it pushes all of the content to the side of it.
However, when positioning is set to Absolute, the div does not position correctly and sticks to the left side of the div instead of the right, causing usability problems. The div positions correctly when using Relative positioning, but not absolute.
I have tried setting the margin-left to the width of the div but the size of the div can change depending on the template the page is using. I have tried setting the margin-right property appropriately but the div moves when the browser is resized.
Expected result: http://puu.sh/479u1.png (this uses margin-right to position it but this was done to show simpily what was expected to happen - this cannot be used due to the unexpected movements caused when the browser is resized)
Actual result: http://puu.sh/479ya.png
CSS code for the floating div:
.GBDragBoxOptions
{
position: absolute;
z-index: 99;
float: right;
width: 400px;
}
If you want to position the div to the right, then just use "right: 0px;" or something like that, in conjunction with "position: absolute;". As long as the parent div is positioned in some way (i.e. relative), that should do what you want.
Float does nothing on absolute positioned elements..
Use right: 0; instead of float: right;
It's a absolute div, so why float, use top and right
.GBDragBoxOptions
{
position: absolute;
z-index: 99;
width: 400px;
top:100px;
right: 50px;
}
Whats the best way to position a div at multiple places on a page anchoring the div from the bottom left. It should be able to attach it to any element on the page, using that element as for relative positioning. Its for a tool tip. Each tool tip will have the same width, but depending on text in tooltip, that will determine the height.
you will use absolute positioning , the parent element that it is relative to will be positioned relative
when using absolute positioning to get the element outside of a relative parent use negative value for left and top
<div class="parent">
<div class="tooltip"></div>
</div>
.parent{ position: relative; /*set whatever else */}
.tooltip {position: relative; bottom: -20px; left: -20px; height 20px; width:20px;}
just an example of 20px X 20px tooltip that is positioned to the bottom and left of the parent
I'm really stuck here...
I have a site layout with a central layout (it's about 922px width, centered on the page)... I have a little logo that is to the top left of this, but it sticks about 10 pixels to the left of the central design. If you can imagine, it sort of sticks out to the left of the design...
Now, I was told that absolute positioning would make this happen. But I can't see how the logo would work with absolute positioning if the design itself it in the center of the page. I think this is to make sure it works in IE6... I have tried floating the logo in the central header, and then applying a negative margin of margin-left: -10px; which does work, but I've read this doesn't work in IE6.
Without a snippet of code its hard to tell, but it's probably an issue with where your element is getting it's 'absolute' positioning from. 'Absolute' is a misnomer. It really means "absolute...relative to the nearest positioned parent". So if in your design, you don't have a parent element with the css "position" style on it, it's going to take its position from the body element (which may have some margin/padding on it depending on your browser).
Adding a position: relative; to the element that you want to be the "outermost" container will allow you to specify position: absolute on an item within it, and specify your exact coordinates from there.
Set "position: relative" on a container div.
<style type="text/css">
div.page {
position: relative;
margin: 0 auto;
width: 922px;
}
div.page img.logo {
position: absolute;
left: -10px; top: 0;
}
</style>
<div class="page">
<img class="logo" ... />
</div>
Though.. I would rather make it work without absolute positioning.
When you position your logo absolutely it needs to be placed relative to something. That something is normally the viewport edge. If the logo is inside an element that is positioned relatively then it will instead be positioned relative to that element. So the answer is to make your centered page div display:relative; so the logo always aligns to the page not to the edge of the browser window. Here is an example:
The HTML:
<div id="centeredpage">
<img id="logo"... />
</div>
The CSS:
body {
text-align:center;
}
#centeredpage {
width:922px;
margin:0 auto;
text-align:left;
position:relative;
}
#logo {
position:absolute;
top:0;
left:-10px;
}
I hope that helps.