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.
Related
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 text together in a certain way and hoping to make it work responsively as well.
I have this class which centers the div
(I was forced to specify a width and height of 50% otherwise it would not center it horizontally or vertically.
I'm trying to get the <p><span><sup>*</sup>Lorem's sipsum ipsul lo ip lipson loroem</span></p> aligned left to the <strong>Loremipsumlo</strong> (see codepen) http://codepen.io/mhussa19/pen/QjEwXa
The paragraph text should begin with the L of loremipsup
I can't seem to figure out how to do this with out constantly adjusting the top position (when screen size changes) which i don't want to do.
The h1 is position relative and the spans are both position absolute right: 0;. This works well so I wouldn't want to change this. See class setup below
h1 {
position: relative;
}
h1 span {
position: absolute;
right: 0;
}
<div class="jumbo-header">
<h1>
<span>Experience</span><span><strong>Loremipsumlo</strong></span>
</h1>
<p><span><sup>*</sup>Lorem's sipsum ipsul lo ip lipson loroem</span></p>
</div>
.jumbo-header {
border: 1px solid yellow;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50%;
max-width: 38em;
height: 50%;
z-index:10; }
I have a background that covers the entire screen. Black line is end of viewport.
Main-div is just a container (dark blue) using position absolute.
Top-div (yellow) also using position absolute.
Middle-div (red) also using positon absolute.
Why? Well I want the Middle-div (red) to completely cover the screen vertically. Also only half should be visible - needs to scroll to see it.
Everything works fine, but how can I position the Footer-div (yellow) below the Middle-div (red)?
CSS code for Yellow Footer:
#footy
{
width: 100%;
height: 100px;
position: absolute;
bottom: 0px;
border: 1px solid yellow;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
Right now it sits on the bottom, leaving too much gap above. Problem it must work on different resolutions. Setting bottom: 100px; will only work on this resolution....
Image:
You cannot position elements relative to other absolutely positioned elements unless they are children of said elements, or both children of the same element when you know the position and size of both elements.
If you make the footer a child of the middle div, you can position it absolutely within:
#footy
{
width: 100%;
height: 100px;
position: absolute;
bottom: -100px;
border: 4px solid yellow;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
I don't know all of your other CSS/HTML, but I guessed in a fiddle here, with some exaggeration of borders, etc for visual reference:
http://jsfiddle.net/jtbowden/NuG7T/
You can also create a wrapper around middle and footy:
http://jsfiddle.net/jtbowden/NuG7T/1/
I'm reviewing some code and while it works, I do not understand how the CSS below is centering the inner div.
Codepen demo available too.
HTML
<div class='outer'>
<div class='inner'></div>
</div>
CSS
div {
border: 1px solid black;
box-sizing: border-box;
}
.outer {
position: absolute;
background-color: goldenrod;
width: 100%;
height: 100%;
}
.outer .inner {
width: 75%;
height: 75%;
background-color: green;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
Here is the answer for you question.
The margin: auto just tells the browser to split up the available space evenly between the left and right side of the element. By available space, any unoccupied horizontal space between the left and right edges of the parent container.
Reference
it is just because of
margin: auto;
You can get better understanding of this from Box Model.
For some reason a colleague at work doesn't want the sweet SO points so here is his answer.
If you were to put
top: 0;
bottom: 0;
left: 0;
right: 0;
on a normal div without height or width it would make the div the entire size of its container. Putting height and width on that div would constrain it and while it would try to fill its container, it would respect the set dimensions.
Setting margin: auto; as mentioned is the key. This allows the box for this div to fill its container by expanding the margins equally while respecting its set dimensions.
Is this the best way to center things? No idea but it works.
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.