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
Related
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 an answer here:
Ribbon with a "3D" effect
(1 answer)
Closed 8 years ago.
what would the best way to create a div that overlaps its parent container. im using bootstrap and want to create a banner that goes larger than its container, i want to create the following:
This is the code i have so far:
<div class="container container-white no-pd">
<div class="service-banner">
<div class="text-center">
Headline title here Our Services
</div>
</div><!--/service banner-->
</div><!--/container-->
This gives me the following:
any advice?
You could use pseudo elements for this sort of functionality:
.gray{
height:300px;
width:100px;
background:darkgray;
position:relative;
}
.banner{
position:absolute;
width:350px;
height:100px;
background:blue;
top:20px;
left:80px;
}
.banner:after{
position:absolute;
content:"";
height:0px;
width:0px;
border-left:20px solid transparent;
border-top:20px solid gray;
bottom:-20px;
left:0;
}
<div class="gray">
<div class="banner">Heading here</div>
</div>
Please Note the following for further understanding:
I've been able to use the top, bottom, left and right properties in my css since I have set that element to position:absolute;. When an element is positioned like this, It means they can be manipulated using these.
It's also important to note how i made the 'triangle shadow'. This was achieved through using the 'border hack', in which allows you to set a transparent border, and a 'coloured one' in order to make this: see here for more info about this.
pseudo elements need to contain a content and usually are positioned absolutely in order for you to position them nicely in your markup.
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?
I am trying to position elements centrally, and in other positions within a fixed, centered box which overlays (when the user scrolls, the overlay-box stays put) my whole mobile site.
I have attached an image diagram to demonstrate what i'm trying to achieve:
Extra details include:
The 'overlay' has a width & height dependent upon the width and height of the users mobile device. i.e, width:80%; height:60%;.
I would like for the image in the top right hand corner of the diagram to always be that way on my site (as far in that corner as possible).
Any help is greatly appreciated. Cheers.
Check out the code. This mostly requires the use of relative and absolute positioning. You can tweak a bit to meet your needs
HTML
<div class="body" style="position:relative">
<div class="box">
<div class="box1"></div>
<div style="clear:both;height:20px"></div>
<div class="child"></div>
<div style="clear:both;height:20px"></div>
<div class="child"></div>
</div>
</div>
CSS
.body{
width:400px;
height:250px;
background-color:#888;
}
.box{
width:80%;
height:150px;
border:1px solid #FFF;
position:relative;
margin:auto;
top:10%;
}
.child {
height:10px;
width:50px;
position:relative;
margin:auto;
background-color:red;
}
.box1{
width:10%;
height:10%;
border:1px solid #FFF;
position:absolute;
top:0;
right:0;
}
I have added the fiddle too. http://jsfiddle.net/nQvEW/176/
This is my example code which is not working as expected in IE7 - I think position:relative; is the issue for IE7
.oner {
position:relative;
height:50px;
background:#fff;
border:5px solid #e4e4e4;
height:200px;
margin-top:20px;
}
.onea {
position:absolute;
height:500px;
right:0;
width:200px;
background: #eee;
z-index:999;
}
.onet {
position:absolute;
height:500px;
left:0;
width:200px;
background:red;
z-index:999;
}
HTML:
<div style="height:500px;width:900px;margin:auto;">
<div class="oner">
<div class="onea">IE IE7 this div goes behind the "oner" div below </div>
</div>
<div class="oner">
<div class="onet">My name is Sumit Kumar Ray my email is ..</div>
</div>
</div>
What happens is that the onea div goes behind the following oner div, but in other browsers it overlays it
setting a z-index on a div is actually supposed to create a stacking context, not simply bring the div, it's applied to, above another.. so while I do think IE7 didn't get it quite right, (surprise!)
I think it would be better to make the oner divs the ones that create the start of the stack by setting the z-index on them, and what you want it for the first oner to have a higher z-index than the second
<div style="height:500px;width:900px;margin:auto;">
<div class="oner" style="z-index: 1;">
<div class="onea">IE IE7 this div goes behind the "oner" div below </div>
</div>
<div class="oner">
<div class="onet">My name is Sumit Kumar Ray my email is ..</div>
</div>
</div>
with this there is no need for the Absolutely Positioned children to have a z-index at all, as those divs now take their "z level" from their relatively positioned parent - IE and the stack can be quite confusing!
CSS:
.oner {
position:relative;
height:50px;
background:#fff;
border:5px solid #e4e4e4;
height:200px;
margin-top:20px;
}
.onea {
position:absolute;
height:500px;
right:0;
width:200px;
background: #eee;
}
.onet {
position:absolute;
height:500px;
left:0;
width:200px;
background:red;
}
However it does mean that if you have more than two as in this example you need to set the levels on all the oner divs with the first one being the highest.. (that's why I put the oner style inline in the HTML if you have more you might need some more classes to separate them)
Since both the inner divs have a zindex of 999 the second should overlay the first, although zindex results can be unpredictable across browsers. Really you should set different zindex values to accurately control depth.