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;
}
Related
I understand it's possible to position:fixed a child element relative to it's parent using transform. When scrolling the document, is it possible to keep the fixed child's position relative to it's parent, rather than the document?
Demo
https://jsfiddle.net/ds0vbtbt/3/
Update: Above is a simiplied version of my problem. position:absolute: is not the solution I'm looking for.
Update:
Doesn't seem possible without JS once the initial transform is performed
Yeah you can do that with position absolute, provided the containing element is set to relative. You don't need the transform property at all.
.test {
width: 400px;
height: 400px;
border: 1px solid;
position: relative;
}
.box {
margin-top: 20px;
width: 300px;
height: 100px;
border: 1px solid red;
position: absolute;
}
Updated fiddle: https://jsfiddle.net/ds0vbtbt/1/
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Update: position: fixed is always going to relative to the view-port - so if you change the window size it will be updated, but when scrolling it wont be. That said, Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior. They do work when applied to the same element; the element will be positioned as fixed, and then transformed.
You are using position:fixed which fix the element with viewport.
Use position:absolute for child element to fix it with parent element.
I came across a solution for (horizontally) centering a fixed position element as follows:
element {
width: 200px;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
}
(where element is obviously the element to be centered).
The question is how does this actually work? Is this documented behaviour?
It’s a shame you can’t do the same thing vertically.
Thanks
You must set height to make it vertically center and top and bottom must be 0 also change the margin to this margin:auto
Try this one:
element {
width: 200px;
height:10px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom:0;
margin:auto;
}
The element is centered horizontally because of this line (Margin:0 auto).
The 0 defines top and bottom margin.
Auto = auto margin for left and right. This is the key of making the element to stay center.
Vertically is different because the way other elements can be place on top and below the element.
You can use this page for reference -> https://css-tricks.com/centering-css-complete-guide/
Reference from Mozilla Developer Network -> https://developer.mozilla.org/en/docs/Web/CSS/margin
OK, I think I have an answer, thanks to Smashing Magazine: Absolute Horizontal and Vertical Centering in CSS. Here is the brief version:
position: fixed or position: absolute removes the element from the normal flow, and the element gets its bearings from its container or the body.
top:0, bottom: 0, right: 0 and left: 0 effectively stretch the element to its container. For absolute & fixed position, they also define a bounding box..
setting the height and width restricts the size of the box, so it isn’t stretched, but:
The margin is calculated from the bounding box above. In particular, margin: auto causes the centering.
It appears that while a vertical margin: auto has no effect on normal elements (they are set to 0), they apply to fixed and absolute elements.
Note that the explanation above includes fixed positioning, which the article doesn’t focus on.
Thanks also to #winresh24 who pointed out the vertical centering. That help me to track down the solution.
I'm looking for a way to scroll a panel that sits below a panel that doesn't scroll. Here's a fiddle with what I'm trying to do:
http://jsfiddle.net/zh59w/
Basically, the 'stay on top' needs to stay on top but all the 'scroll' elements needs to scroll as necessary. I was hoping by nesting the scrolling elements in a div (named nest), and position that nest relatively, then I'd be able to position the scrolling div absolutely, but when I do that it seems to take up no space and disappears.
The closest thing I can get to work is this:
http://jsfiddle.net/zh59w/1/
But you'll see I have to cheat by setting the:
#scroll {
top: 20px;
}
But I'd like to avoid this because I don't know how big the 'stay on top' is going to be.
Anything I can do (other than set the 'stay on top' to fixed)?
Here is a fixed div that stays at the top of the page:
HTML:
<div id="stay_on_top">STAY ON TOP</div>
<p>SCROLL</p>
CSS:
#stay_on_top {
position: fixed;
top: 0;
margin: 0;
padding: 7px;
width: 100%;
background-color: gray;
}
Here the code: http://jsfiddle.net/aziom/ceNFH/
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.
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