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!
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
There are 2 fixed(can't be change) inline blocks and min-widths for both of them. When i'm trying to resize the window (width less then min) they overlap each other. Any suggestion ? How can I set min-width for whole page?
<div style="position:fixed;left:0;top:0;bottom:0;width:40%;min-width:500px;border:2px solid red;margin:5px;"> </div>
<div style="position:fixed;right:0;top:0;bottom:0;width:40%;min-width:500px;border:2px solid blue;margin:5px;"> </div>
The short answer is no, not without changing that position: fixed
have a look at what position: fixed actually means:
fixed
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
And since you can't control the width of the viewport...
Position absolute should work though, and then you can set your body to something like this:
body {
min-width: 1020px;
position: relative;
min-height: 100%;
}
html{
height: 100%;
}
http://jsfiddle.net/1forkath/
http://jsfiddle.net/yLt5v/
.tc{
position: fixed;
width: 100%;
}
When giving position:fixed for .tc the background is overflown.
How to solve this?
Set percentage and display block
.tc{
position:fixed;
width:54.5%;
display:block;
}
DEMO
Assigning an element position:fixed; makes it relative to the BODY element and it will no longer follow the width of the parent element so the width 100% expands it the full width of the page. Now since you have no "left" position declared it will keep alignment after the parent element and the excess width just gets overflown to the right.
Can you solve your problem by adding left: 0; top: 0;? Without left the fixed element starts at his own position and have 100% width of viewport.
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