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
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'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;
}
I want to use margin in my code, but I have some problems.
Please look at:
<div id="outer">
<div id="inner1">
Margin not coming from top (not absolute)
</div>
<div id="inner2">
Div has absolue prop
</div>
And the CSS code is:
#outer {
margin: 100px;
background-color: green;
height: 300px;
widht: 400px;
}
#inner1 {
margin: 10px;
background-color: red;
}
#inner2 {
position: absolute;
margin: 20px;
background-color: blue;
}
I am not able to understand why setting position to absolute is
restricting width of #inner2 div.
Since #inner1 div does not have absolute property, it is not having
margin from top. I can't understand this. Please explain.
Here is output: jsFiddle
Ques1: I am not able to understand why setting position to absolute is restricting width of inner2 div.
setting position to absolute of inner2 div, gets the width auto so as long as text.
setting position to relative of inner2 div, gets the width of outer div.
So if you want absolute positioning, set also the width of inner2 div.
Ques2: Since inner1 div does not have absolute property, it is not having margin from top. I can't understand this. Please explain.
from the document flow, your inner div never know it is inside some other div (outer), setting border or position to absolute of outer div fix this.
fiddle http://jsfiddle.net/C7dE2/20/
setting
position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width if that is the effect you're after..
see this
absolute vs relative position width & height
You should use green div's padding-top property - #inner1 with margin-top set on high value only pushes the whole #outer further down!
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>
how to position a div element so that it shows at the top left corner, on top of all the content of the parent div, but at the same time its width does not extened more than its parents width?
Thanking you
Regarding the width, it depends how much content you have - can you set a static width on the element?
Regarding the positioning, you need to set
position:relative
on the parent, then add:
position:absolute;
top:0;
left:0;
on the child.
i am not sure...
if you position this item with:
position: absolute;
top: 0px;
left: 0px;
And the patent Div must have
overflow: hidden;
I found out a solution to it by myself. To make the child div appear on the top right corner of the parent div i set its position to absolute and top and left to 0. I solved the width problem by dynamically setting the child's width to the parent's width using jquery.
Note: the parent element's position should be set to relative for this to work on firefox.
Live preview: http://jsfiddle.net/PA6JZ/
#parent { position: relative; }
#child { position: absolute; top: 0; left: 0; }
<div id="parent">
<div id="child">Boom</div>
<p>Text here</p>
</div>