I know that bottom, top, left, and right with position: absolute sets that edge of the element to some distance away from that edge of the parent element. But how is the edge of the parent defined? Where is it in the box model? Does it include the border or the margin? The padding?
It's within the border, but ignores the padding.
Let's show it with an example. View on JSFiddle
HTML
<div>
<span>absolute</span>
regular
</div>
CSS
div {
position: relative;
top: 50px;
left: 50px;
background: #eee;
padding: 15px;
width: 100px;
height: 100px;
border: 5px solid #222;
}
span {
position: absolute;
top: 0;
left: 0;
}
Of course, an absolutely positioned element is positioned in relation to the first parent it comes across that is positioned with anything other than static. If the div in my example had no position set, the body of the fiddle would be used as that parent.
Related
which position is an absolutely positioned element relative to its absolutely positioned parent? parent's border or content?
Css codes:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
position: absolute;
margin:auto;
top:0;
bottom: 0;
left: 0;
right:0;
width: 400px;
height: 200px;
border: 10px solid darkgray;
}
.child {
position: absolute;
left: -20px;
top:-20px;
width: 440px;
height: 240px;
background: ;
border: 5px solid darkgray;
}
Html codes:
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
Seems the div with class = "child" positioned relative to its parent's content, not border, anyone know it exactly position rules?
I'll try to help you understand how positioning works for your case, using some visuals.
Firstly, please keep in mind that you have positioned both elements absolutely and not one relative to the other.
1st check here: http://prntscr.com/e53phe
By making the parent border: 0px you see that the top left pixel of your child, together with its border, is positioned on the top left pixel of your your parent.
2nd, see how it changes when we add border to the parent: http://prntscr.com/e53rcf
The pixels you add as border of the parent are 'taking the space' of the parent's content. So, now the child's top left border pixel is starting where your parent's border 'ends', meaning in the inner corner of your parent's top left.
Hope that helps. I suggest you play with the borders + positioning on your browser to get a better understanding.
PS: I removed the left: -20px; and top:-20px; attributes to help visualizing
I have issues with understanding the div position (relative, absolute, fixed) properties. I basically have an absolute div centered. Inside the div it should be possible to scroll vertically and horizontally. Inside this div should be a fixed header with a width larger than to screen (overflow) and a content div which has an overflow vertically and horizontally as well.
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(100% - 20px);
height: calc(100% - 20px);
top: 10px;
left: 10px;
background: #2924aa;
overflow: scroll;
display: flex;
position: absolute;
z-index: 20;
}
.container-header {
width: calc(100%);
height: calc(10%);
background: #2924aa;
overflow: visible;
z-index: 10;
position: fixed;
background: red;
}
.container-body {
width: calc(110%);
height: calc(110%);
background: #2924aa;
overflow: auto;
position: absolute;
background: green;
}
<div class="container">
<div class="container-header"></div>
<div class="container-body"></div>
</div>
Here is my plunker:
https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy
So i think the main question you have is in regards to the Position Attribute in CSS3. Below is a brief summary of each possible value.
CSS Positioning
The CSS positioning attribute of position has four different values.
Static - Static is the default value for position. It keeps the element on the page in its place, and it scrolls up the page as you scroll.
Relative - Relative positioning is pretty much as the same as static; however, you can use the left, right, top, and bottom attributes to alter the placement of the element relative to its original position.
Fixed - A fixed element's position is in relation to the viewport (i.e. the browser) therefore, an element with a fixed position does not scroll with the page, because when you scroll the viewport does not change. However, if you resize the browser, the element will change position.
Absolute - A element with an absolute position, is positioned relative to its parent element (i.e. the element that contains it).
A good resource for more information, including some diagrams can be found here.
I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.
HTML:
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS:
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
background: red;
}
#thebag::after {
content: '';
position: absolute;
top: 0;
left: 30%;
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 70px solid transparent;
}
https://jsfiddle.net/kn87syvb/1/
You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.
https://jsfiddle.net/kn87syvb/2/
By setting a position:absolute to the #thebag::before you "broke" the flow and your text is behind your div. You have to precise, than the h3 tag will be relative depending it's container.
So you have to add this :
#thebag h3 {
position:relative
}
To precise all h3 on your #thebag section will be affected. Be careful, if you change your kind of selector, It won t work anymore.
May be it will be better to use a custom class, like this https://jsfiddle.net/kn87syvb/5/
You need to use postion:relative property:
#thebag h3{
postion:relative;
}
Small explanation:
position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).
However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.
please check this snippet:
https://jsfiddle.net/kn87syvb/4/
You can also re-structure your HTML and CSS as follows:
HTML
<span class="start">Shihab Mridha</span>
<span class="end"></span>
CSS
.end {
height:0;
width:0;
float: left;
display: block;
border:10px solid #0f92ba;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#0f92ba;
border-left-color:#0f92ba;
}
.start{
height: 20px;
width: 60px;
float: left;
background: #0f92ba;
display: block;
color:#FFFFFF;
}
Reference Link : https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/
I'm trying to align vertically a div inside a container with a height defined. I'm following the guide of http://www.vertical-align.com/, but I'm facing some issues.
According to the website, if I use this css with for this code:
#containingBlock {
height: 200px;
position: relative;
overflow: hidden;
border: 1px solid red;
}
#containingBlock > div {
position: absolute;
top: 50%;
border: 1px solid green;
}
#containingBlock > div > div {
position: relative;
top: -50%;
border: 1px solid orange;
}
<div id="containingBlock">
<div>
<div>
This should be placed in the middle
</div>
</div>
</div>
Fiddle available here
I should obtain a text perfectly in the middle. But this doesn't happen because the top: -50% doesn't work. According to Mozilla dev the top property + % value should be based on the parent's height, which has the same height of its child automatically in this case. But the "automatic wrap height" does not seem to be take into consideration. If I specify a explicit height for the parent div (I mean, the first one nested), everything seems to be ok, but I would like it to take the height of its child automatically! What's wrong with this?
If the height of the block to be positioned is known you can affect the correct positioning with negative margin (i.e 50% of the known height).
If it is not known you can affect it with a CSS transform as follows
-webkit-transform:translate(0%, -50%);
This moves the object vertically half it's own height...and so on
HTML
<div class="containingBlock one">
<div>
This should be placed in the middle
</div>
</div>
CSS
.containingBlock {
height: 200px;
position: relative;
border: 1px solid red;
}
.containingBlock > div {
position: absolute;
top: 50%;
border: 1px solid green;
-webkit-transform:translate(0%, -50%);
}
JSfiddle
here's a fiddle: http://jsfiddle.net/dC22r/4/
you have to set an height to the div that has to be centered then give it top:50% and subtract half his height with a negative margin.
By default, if you try to position your element absolutely in the top left corner of a parent container it will do so respective of the border width (please see the fiddle: http://jsfiddle.net/t52Pp/1/):
<div>
<i>element</i>
</div>
div {
position: relative;
border: 20px solid red;
height: 14px;
}
div > i {
position: absolute;
top: 0;
left: 0;
font-size: 14px;
}
How do I do the same irrespective of the border width without having to indicate negative values (e.g. http://jsfiddle.net/u75s7/1/):
div > i {
position: absolute;
top: -20px;
left: -20px;
font-size: 14px;
}
Your best bet is probably too add another div around the bordered div. Then given it a style of position relative, ans remove the position style from the bordered div.
This should fix your problem.