This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 9 months ago.
Given my code below:
img
{
width:400px;
}
div {
border:2px solid blue;
width:200px;
height:100px;
margin-top:-70px;
z-index:999999999;
}
<img src="https://i.gyazo.com/ee6bb88b3da7ce038475b8ce27fb5fbb.jpg" />
<div>
</div>
Logically speaking, the <div> is created after the <img>, so <div> should overlap the <img> element when I give it a negative margin. But why is the <img> element covering the <div> instead, and even with z-index applied to the <div>, it doesn't work?
The CSS property z-index only works in the element whose position property has been set to a different value other than the default value.
So in a default element <div>, the position property is by default set to static. So in order to control the vertical stacking (z-index) relative to other components you first need to set the position, e.g. position: relative;.
You can read more here
Here's your example:
img
{
width:400px;
}
div {
border:2px solid blue;
width:200px;
height:100px;
margin-top:-70px;
z-index:999999999;
position: relative;
}
<img src="https://i.gyazo.com/ee6bb88b3da7ce038475b8ce27fb5fbb.jpg" />
<div>
</div>
Related
This question already has answers here:
Why the content is not covered by the background of an overlapping element?
(8 answers)
Closed 3 years ago.
An <img>, followed by a <p> with negative margin.
The <p> border and background are under the img.
I don't understand why.
Same in Firefox and Chromium.
Thanks !
#d1 {
width:400px;
}
#d1 img {
max-width:350px;
}
.caption {
color:red;
font-size:2em;
border:3px solid red;
margin-top:-40px;
background:#eee;
padding:10px;
/*position:relative;*/
}
<div id="d1">
<img src="https://i.kym-cdn.com/entries/icons/mobile/000/018/012/this_is_fine.jpg">
<p class="caption">This is fine.</p>
</div>
Adding position:relative to .caption solves the problem, but does not answer the question.
CodePen
Why does this happen? Because one element has to be under the other...
There is something called a stacking context. Certain element have a higher stacking context than other..
Root element (the element)
Non-positioned elements in the order they are defined
Positioned elements in the order they are defined
So in this case, the p has a lower stacking context since the position is being changed.
Add z-index to image
#d1 {
width: 400px;
}
#d1 img {
position: relative;
display: block;
max-width: 350px;
z-index: 5;
}
.caption {
color: red;
font-size: 2em;
border: 3px solid red;
margin-top: -40px;
background: #eee;
padding: 10px;
/*position:relative;*/
}
<div id="d1">
<img src="https://i.kym-cdn.com/entries/icons/mobile/000/018/012/this_is_fine.jpg">
<p class="caption">This is fine.</p>
</div>
Why is the image above the padding and border but below the text?
W3C answers this question already:
Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
Most important is this part:
Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
So if you switch the elements you will see that your image is now above you paragraph.
body {
background-color: #a3d5d3;
}
#d1 {
width:400px;
}
#d1 img {
max-width:350px;
margin-top: -70px;
}
.caption {
color:red;
font-size:2em;
border:3px solid red;
background:#eee;
padding:10px;
/*position:relative;*/
}
<div id="d1">
<p class="caption">This is fine.</p>
<img src="https://i.kym-cdn.com/entries/icons/mobile/000/018/012/this_is_fine.jpg">
</div>
<p>Why is the text over, but border and background under ?<br>
Expected: whole "caption" over img<br>
NB: <em>position:relative</em> in .caption solves the problem, but does not answer the question
</p>
In your example the background color is also below the image. It should be obvious why. Background color has a lower stacking context.
Here is an image that shows the order:
This question already has answers here:
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 7 years ago.
I am wondering how can I set line-height to be always equal to height of the container div - in order to center the element inside of the container in the middle of the height of the container.
Lets say I have a following:
<div style="height:12%">
<i style="line-height:??"></i>
</div>
How can I set line height, so that it changes with the changes when the height of the container div changes?
Thanks uksz
You put another inline-level element on the same line with a height equal to 100% of the container. It's most common to use display:inline-block; here, but any inline-level element to which height applies, such as inline-table, inline-flex or a replaced inline element will work just as well.
e.g div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }
html, body { height: 900px; }
div { border:1px solid black; height: 12%; }
div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }
<div>
<i>My text</i>
</div>
The intuitive way would be to set the line-height to 100%, but that actually just sets the line height to 100% size of the font
Assuming you probably want to center your text, try this
.container {
position:relative;
}
.center {
position:absolute;
top:0; left:0; bottom:0; right:0;
margin: auto;
/* for horiz left-align, try "margin: auto auto auto 0" */
}
I have the following HTML and CSS where the position of the #header id has to be mandatory set to absolute:
<div class="main">
<a href="www.website.com">
<div id="header" class="other">
</div>
#header{
padding-left: 250px;
position:absolute;
}
This code sets the header div over the link tag and it becomes (the link) unavailable for selecting.
My question is what CSS do I have to apply to .main > a so that it does not get below the header div?
I tried the below but it does not work so any other ideas are welcomed:
.main > a {
z-index:99999;
}
z-index will work only on positioned elements
z-index wont be applied if no positioning has been specified for the element. So, I would suggest you to change your CSS slightly as below.
ie, the new CSS for .main > a would be like
.main > a {
position:relative;
z-index:99999;
}
UPDATE
z-index will not work with statically positioned elements..see the answer here
The z-index attribute won't have effect if you don't set position to relative, absolute or fixed.
.main > a {
position: relative;
z-index:99999;
}
This question already has answers here:
Position: absolute and parent height?
(8 answers)
Closed 8 years ago.
I have an image with absolute position image inside div tag. What i want to resize the div tag according to image if i resize the browser. My code are here:-
CSS
#parent{
width:225px;
height:auto;
position:relative;
border:1px solid #000;
}
img{
position:absolute;
}
HTML
<div id="parent">
<img src="images/photo1.jpg" />
</div>
Actually div tag border doesn't containing an image which is absolute positioned.
Please help.
Your question is not well worded. But maybe you need something like this?:
#parent{
width:100%;
max-width:250px;
height:auto;
position:relative;
border:1px solid #000;
}
img{
max-width:100%;
}
are you sure you need it absolute?
Not sure what I am getting wrong here, but let's say I have two divs, and an h1 element (or P1) for that matter that looks like this:
<div class="wrapper">
<div class="top">
<h1>Content header</h1>
</div>
</div>
I want my element to appear in the 'center middle' of the inner div, that is it's immediate parent. To achieve this, I give it a margin-top:50% & a margin-left:50% with the understanding that this would render it exactly towards the center middle of the div. But while it does get it to the middle, it doesn't quite get it to the center. Infact it seems to position itself relative to the outer div, the one with class wrapper.
I have recreated this using jsfiddle here:
http://jsfiddle.net/KLRsN/
Am I specifying the selectors wrong or is my positioning in itself incorrect?
-the above ans isnt completely correct as the text will still not be completely centered vertically.
.wrapper{
margin:5px;
max-height:250px;
min-height:250px;/*not required only height:250px will do*/
border:1px solid green;
}
.content
{
margin:5px;
border:1px solid black;
height:100px;/*you have to give the parent element a height and a width within which you wish to center*/
width:100px;
position:relative;/*giving it a position relative so that anything inside it will be positioned absolutely relative to this container*/
text-align:center;/*aligning the h1 to the center*/
}
.content h1{
border:1px solid black;
position:absolute;
top:50%;
left:50%;
line-height:50px;
width:50px;
margin-left:-25px;/*half the width of the h1 so that it exactly centers*/
margin-top:-25px;/*half the height of the h1 so that it exactly centers*/
}
explanation:
-ever element in html is in the form of a rectangular box so applying margin-top:50% is aligning the top of that box to 50% of the parent element and not the text inside the box.
-that is the reason the text is not exactly aligned to the center.
-also it is essential to provide the parent element(within which you wish to center the h1) a width and height.
The correct way to do what you are looking for would be by using absolute and relative positioning.
-give the .container a position value of relative and the h1 a value of absolute
-by giving the h1 a width and height we then apply a negative left margin equal to half the width and a negative top margin equal to half the height so that the text is exactly centered.
also for more on positioning - check out the following link
If you want to display text content at a middle you can use text-align:center , or you can apply width to your h1 tag and use margin:auto. To position it vertically middle use relative position and top:50% . Try this css
.wrapper{
height:250px;
min-height:250px;
border:1px solid green;
}
.content{
position:relative;
top:50%;
border:1px solid black;
}
.content h1{
border:1px solid blue;
margin:auto;
width:100px;
background:red
}
Hope it helps