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?
Related
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>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
I have something like that
<div id="hover_parent">
<h3>Something</h3>
<h3>Something else</h3>
</div>
that looks something like that
#hover_parent{
background-image:url(animage.jpg) no-repeat;
background-position:bottom left;
background-size:cover;
width:100%;
}
h3{
margin-top:20px;
width:50%;
text-align:center;
transition:0.2s;
}
h3:hover{
margin-top:0px;
}
So what I want to achieve, is that the child-elements move a bit up when hovering them. What they do of course by using a smaller margin-top-amount when hovering.
But my problem then is that the whole parent moves (especially the background-image) up too when hovering a child-element.
How could I prevent that?
None of my child-elements do have a real absolute height, so I didn't come along with min-height and calc but that could do it - nor?
try this. h3 required display:inline-block;
#hover_parent{
background:url(https://dummyimage.com/600x400/000/fff) no-repeat;
background-position:bottom left;
background-size:cover;
width:100%;
color:#fff;
height:200px;
}
h3{
margin-top:20px;
width:50%;
text-align:center;
transition:0.2s;
display:inline-block;
}
h3:hover{
margin-top:0px;
}
<div id="hover_parent">
<h3>Something</h3>
<h3>Something else</h3>
</div>
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 4 years ago.
So I'm trying to get the blue colored element to be upfront since the red colored one is staying in front of the blue one making the text appear bellow it, this is messing with the layout I had imagined.
I'm using z-index property but the red oval shaped element is staying upfront no matter what...
This is my code:
<div style="width:100%; height:auto; display:flex; flex-direction:column; overflow:hidden; outline:1px solid red; ">
<div style="width:100%; height:auto; background-color:red; position:relative; margin-top:300px; padding:25px;">
<div style="width:105%; height:500px; border-radius:50%; position:absolute; left:50%; z-index:1; transform:translateX(-50%); top:-150px; background-color:red;"></div>
<div style="width:100%; min-height:500px; background-color:blue; z-index:2; display:flex; flex-direction:column; ">
<span style="font-size:30px; color:red; align-self:center; margin-top:auto;">MENU</span>
</div>
</div>
</div>
z-index only works on positioned elements (position:absolute,
position:relative, or position:fixed).
You can learn more on z-index with W3 School
set position:relative to your blue div
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 8 years ago.
Tried everything, with ul's... div's... but it doesn't appear how it should do.
The main div has margin 0 auto. The main div is 1030px width.
I bet it's a stupid thing...
Demo Fiddle
HTML
<div><span>Things to Know</span></div>
CSS:
div{
text-align:center;
}
div:after{
position:relative;
display:block;
border-top:1px solid grey;
top:-10px;
height:1px;
content:'';
}
div span{
background:white;
position:relative;
z-index:1;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make an image center (vertically & horizontally) inside a bigger div
I have a div which is with absolute position (width/height are 100%).
Notice, not px, percents.
Inside this div I have an image. How do I center this image in this div?
CSS:
/* where margin-left = {img width}/2, and margin-top= {img height}/2 */
.bigdiv {
width:100%;
height:100%;
position:absolute;
}
.bigdiv img {
position:absolute;
left:50%;
top:50%;
margin-left:-10px;
margin-top:-10px;
}
HTML:
<div class="bigdiv"><img src="eg.png" /></div>
You could also put your margin-left, margin-top commands as a style on the img tag instead (since they're unique per image).