I have an inner div in an outer div.
When I am setting top: SomeValue for innerdiv, it overlaps outer div.
#div1{
position: relative;
top: 10px;
left: 20px;
width: 50%;
background: green;
}
#div2{
position: relative;
top:5px;
left: 20px;
width: 80%;
background: red;
}
Here is my jsfiddle
How to overcome it?
You cannot use Top attribute for this. As it will ignore it's parent's boundaries.
Use padding-top instead
{ position: relative; padding-top:5px; left: 20px; width: 80%; background: red; }
Relative Positioning:
A relative positioned element is positioned relative to its normal
position.
http://www.w3schools.com/css/css_positioning.asp
You're using relative positioning on div2, so it is ignoring the fact that it's a nested div and moving it away from it's normal position.
I've updated the fiddle with a workaround:
http://jsfiddle.net/P6dbe/2/
The fiddle removes the relative position of div2 and adds padding to div1, with the below css:
#div1
{
position: relative;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
top: 10px;
left: 20px;
width: 50% ;
background: green;
}
#div2
{
width: 80%;
background: red;
}
You are positioning div2 partially outside of div1. If you want to constrain div2 within div1 you need to set overflow:hidden on div1.
#div1
{ position: relative; top: 10px; left: 20px;
width: 50% ; background: green; overflow:hidden;}
Related
I have the following markup
<button class="filter"><div class="radio"><div class="circle"></div></div> <span>Account Management</span></button>
and CSS
.filter {
font-size: 3vw;
text-align: left;
line-height: 1.6;
padding: 0px;
display: block;
height:auto;
overflow: hidden;
margin-bottom: 3px;
}
.filter span {
background: $leithyellow;
height: 100%;
overflow:auto;
display: block;
width: calc(100% - 60px);
float: left;
margin-left:10px;
padding-left:20px;
}
I cannot get the span to expand to 100% height of the button. Can this be done?
Heights apply only if the heights are defined properly for the ancestors. If you want the height to work, that's a tricky one. You can use one of my favourites, but you need to make sure it works in all the cases:
Give position: relative; to the parent.
Give position: absolute; to the element that needs full height and width.
Give the element, 0 values for all the sides.
Snippet
.parent {
position: relative;
width: 100px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
In the above snippet, it is noted that this can also work, if you give:
.parent {
position: relative;
width: 100px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
width: 100%;
height: 100%;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
One good part about this approach is, you don't need to use the dangerous calc:
.parent {
position: relative;
width: 150px;
height: 50px;
background: red;
}
.parent .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 60px;
background: skyblue;
}
<div class="parent">
<span class="child"></span>
</div>
Note: On a related note, you can also have a look at this question and answer: Calc() alternative to fixed side bar with content?
Set display: flex to the parent
Set align-self: stretch for the child
This will stretch the height of the child div/button to fit the height of its parent without doing any trick.
By using position: absolute instead of flex-box, it won't be very nice eventually when you have more stuff added or re-arrange later on would be the nightmare.
div {
width: 300px;
height: 300px;
border:1px solid black;
}
h1 {
width: 300px;
transform: rotate(-90deg)
}
<div>
<h1>Hola</h1>
</div>
If you try this snippet, you will see that the h1 is rotated and placed in the center of the div (makes sense, they have same width)
But how to align it to the left? (flexible container's width)
You can position the h1 element absolutely with respect to the parent div and then use transform-origin property to specify the axis about which the rotation should happen.
In the below snippet, the element is positioned at the bottom of the parent and because the origin is set at left-bottom, the left-bottom of the element (h1) stays at its position during rotation.
Now because of the rotation, the element would go outside of the parent after rotation. To bring it back into position add translateY(100%) to the transform stack. A text-align: right is added to set the content at left-top. The text-align makes it look a bit more hackish than it actually is but otherwise it is difficult to position at left-top.
div {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
h1 {
position: absolute;
display: inline-block;
bottom: 0px;
width: 300px;
text-align: right;
transform: rotate(-90deg) translateY(100%);
border: 1px solid;
transform-origin: left bottom;
}
div, h1 {
margin: 0px;
padding: 0px;
}
<div>
<h1>Hola</h1>
</div>
Note to future visitors: Unlike using static values for positioning, this solution using translateY() would be able to adapt itself automatically even if the length of the content increases or spans multiple lines like in the below snippet. Again, the only drawback would be that the text would be right aligned.
div {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
border: 1px solid black;
}
h1 {
position: absolute;
display: inline-block;
bottom: 0px;
width: 250px;
text-align: right;
transform: rotate(-90deg) translateY(100%);
border: 1px solid;
transform-origin: left bottom;
}
div,
h1 {
margin: 0px;
padding: 0px;
}
<div>
<h1>Halooo</h1>
</div>
<div>
<h1>Some lengthy content which wraps around</h1>
</div>
check this out it will give a direction to your required solution..
div {
width: 300px;
height: 300px;
border: 1px solid black;
}
h1 {
width: 70px;
margin-left: -20px;
float: left;
transform: rotate(-90deg)
}
<div>
<h1>Hola</h1>
</div>
Updated
Or you can do in this way also
div {
width: 300px;
height: 300px;
border: 1px solid black;
}
h1 {
position: absolute;
left: -10px;
top: 2px;
transform: rotate(-90deg)
}
<div>
<h1>Hola</h1>
</div>
In this example an inner green div is covered by a middle blue div, at least in Chrome, despite that it has a higher z-index. Why is it so and how to make it visible over the blue div? The green div must be inside an outer yellow div. From the top:
1. #inner
2. #middle
3. #outer
you could achieve that but you will need to move the #middle div inside #outer for the z-index to work
div {
position: absolute;
}
#outer {
width: 300px;
height: 100px;
top: 20px;
background: yellow;
}
#inner {
width: 240px;
height: 80px;
top: 10px;
left: 30px;
background: green;
z-index: 2;
}
#middle {
width: 280px;
height: 140px;
left: 10px;
z-index: 1;
background: blue;
top: -16px;
}
<div id="outer">
<div id="inner"></div>
<div id="middle"></div>
</div>
How to style a rectangular div with elliptical rounded sides?
You can get an ellipse by setting border-radius 50%.
You can get two elements, one inside the other, with different sizes, and so get the 2 ellipses needed
.test {
position: absolute;
left: 40px;
top: 40px;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: -30%;
top: 10%;
width: 160%;
height: 80%;
background-color: lightblue;
border-radius: 50%;
}
In this case, using an pseudo element , and so, only one div is needed
demo
Have you checked out this website? Try this:
div
{
border:2px solid;
border-radius:25px;
}
How do I position an element absolutely from the top, but relatively from the sides.
I.e., the object needs to be Xpx. from the top (absolute) and stay centered from the sides.
I tried the following CSS, but it was not working.
position: absolute; top: 105px;
margin: 0 auto;
Thank you.
I would place it inside a container that had absolute positioning, and then make it's postition relative to that.
#container { position: absolute; top: 105px; }
#box { position: relative; margin: auto; }
Then just:
<div id="container">
<div id="box">
</div>
</div>
This is just off the top of my head.
Live Demo
<style type="text/css">
div { padding: 5px; }
#outer {
border: 1px dotted #F00;
position: absolute;
top: 105px;
right: 0px;
left: 0px;
}
#inner {
border: 1px dotted #0F0;
margin: 0 auto;
text-align: center;
width: 200px;
}
</style>
<div id="outer">
<div id="inner">Banner</div>
</div>
If it has a known, fixed width, set the margin-left to negative half the overall width:
#banner { position:absolute; width:400px; left:50%; margin-left:-200px }