I'm trying to "shape" divs by using a div over the other div in order to hide parts of it. I am posting my code below.
Is there a pure CSS way to hide certain elements under a div without hiding the background in a transparent div?
In my example, I would like for the circle to be fully transparent (it's semi-transparent for easier visual purposes) and to hide the part of the square it overlaps.
.square {
background: rgba(134,95,96,1.00);
height: 500px;
width: 500px;
position: absolute;
bottom: 20%;
right: 20%;
min-height: 500px;
min-width: 500px;
}
.circle {
background: rgba(141,76,147,0.50);
border-radius: 50%;
position: absolute;
top: 50%;
bottom: 20%;
right: 33%;
height: 500px;
width: 500px;
z-index: 1;
}
<div class="square"><p>Square</p></div>
<div class="circle"><p>Circle</p></div>
Related
I have a background image, but I need to place a div that its bottom edge should go below the image. What's the easiest way to do this?
Please see the attached image. The white part is the background image and the blue part is my div over the background.
You can create a relative positioned wrapper and then set absolute positioning with bottom: -10%; or bottom: -20px; for a div over a div with image:
.image-with-block-wrapper {
position: relative;
}
.image {
height: 200px;
border: 1px solid #111;
background: url('https://www.gravatar.com/avatar/f42a832da648291bf80206eda08e3332?s=328&d=identicon&r=PG&f=1');
}
.div-over-bg {
border: 1px solid #111;
position: absolute;
height: 50px;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
background: green;
width: 100px;
margin: 0 auto;
}
<html>
<head></head>
<body>
<div class='image-with-block-wrapper'>
<div class='image'></div>
<div class='div-over-bg'></div>
</div>
</body>
</html>
Edit:
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
So I've created a container with a background image and placed a div inside.
I've given the .block margin: auto; to center it and added position: relative; so I can move it, because it has position: relative; I can add top: 100px; to move it down from the top by 100px
.container {
background-image: url('https://via.placeholder.com/150');
width: 100%;
background-position: cover;
height: 300px;
position: relative;
}
.container .block {
height: 300px;
background-color: blue;
width: 500px;
position: relative;
margin: auto;
top: 100px;
}
<div class="container">
<div class="block">
</div>
</div>
Extra info by #I_Can_Help
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
This question already has answers here:
Z-index with before pseudo-element
(2 answers)
Is it possible to set the stacking order of pseudo-elements below their parent element? [duplicate]
(9 answers)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
I have a box I want to show, and I want a background to appear behind the box to cover what remains on the screen. The Box and the Background are bot position fixed, and the z-index for each is set as you might expect, but the background always covers the box ?
.box {
position: fixed;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background-color: yellow;
border: 10px solid green;
z-index: 1;
}
.box:before {
content: '';
position: fixed;
width: 300px;
height: 300px;
top: 150px;
left: 150px;
background-color: tomato;
z-index: -1;
}
<div class="box"></div>
You are using position:fixed, and then placing your :before at 150px from the top and 150px from the left, so it is normal that it is 'after' your .box that is 100px wide and 100px tall and positioned 100px from the left and 100px from the top, also in position fixed.
If you use position:absolute on your :after instead, it will be positioned relative to it's parent div. For example:
.box {
position: fixed;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background-color: yellow;
border: 10px solid green;
z-index: 1;
}
.box:before {
content: '';
position: absolute;
width: 100px;
height: 100px;
top: 0px;
left: -110px;
background-color: tomato;
z-index: -1;
}
<div class="box"></div>
Edit: After getting the comment from Amaury Hanser, I'm adding a second snippet (since I don't know if it was the original poster that upvoted).
To place the :before "below" the .box, in terms of z-index, you could make use of the :before in conjunction with :after:
.box:before {
content: '';
position: fixed;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
background-color: yellow;
border: 10px solid green;
z-index: 1;
}
.box:after {
content: '';
position: absolute;
width: 300px;
height: 300px;
top: 150px;
left: 150px;
background-color: tomato;
z-index: 0;
}
<div class="box"></div>
In simple terms, think of pseudo-elements much like child/parent elements. A child element cannot have a z-index lower than the parent element unless the parent element has no z-index assigned. Also, some position CSS rules give a "default" z-index, and no child can "break out" of it to go behind.
I am attempting to make the background div actually 100% with other movable/floating divs that are positioned absolutely.
Width 100% is not accounting for the .floater div being far off the screen. (which the browser shows with scrollbars).
live example of problem: https://jsfiddle.net/h0arax9o/2/
Scroll to the right of the preview.
I would like the purple background to cover the entire document.
html:
<div class="background"></div>
<div class="floater"></div>
css:
.background {
background: purple;
width: 100%;
height: 100%;
position: absolute;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
Edit: for clarity, I would like the background to 'stretch' across the entire page, for example, if it was an image, when you scrolled in the example, the image would scroll as well.
I updated the example to showcase that.
.background {
background: purple;
width: 100%;
height: 100%;
position: fixed;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
<div class="background"></div>
<div class="floater"></div>
.background {
background: purple;
top: 0; right: 0; bottom: 0; left: 0;
position: fixed;
}
.floater {
background: red;
width: 200px;
height: 200px;
left: 1400px;
position: absolute;
}
enter link description here
You need to use a css reset: http://meyerweb.com/eric/tools/css/reset/
If you click on the gear icon on the top right of the css part of jsfiddle you can choose to normalize css. Here's a forked jsfiddle where I did that: https://jsfiddle.net/ckkoq3pn/
_
I ran into this challenge: fiddle. The short story is, I want to have the green block in the middle of the z-order, without having to change the HTML. So yellow on the bottom, green in the middle, and red on top.
.parent {
background-color: yellow;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
z-index: 1;
}
.child {
background-color: red;
position: relative;
top: 10px;
left: 20px;
height: 50px;
width: 150px;
z-index: 100;
}
.other-guy {
background-color: green;
position: absolute;
top: 40px;
left: 100px;
height: 200px;
width: 200px;
z-index: 50;
}
<div class="parent">
Chillin in the background
<div class="child">
I really want to be on top.
</div>
</div>
<div class="other-guy"> I want to be in the middle! </div>
The longer story is, in my solution I'm using bootstraps grid system to position the child element so the whole thing is responsive. The middle layer is a Google Maps element that needs to be manipulated by the user. My previous solution had an absolutely positioned child element on the map, which works, but I don't know how to make that responsive.
My new solution works great from a responsive angle, but then I found out that the parent is blocking interaction with the maps.
So I now need a solution have some responsive elements on top of Google Maps.
I removed the position absolute from the yellow div and removed the z-index from the green div. Maybe this is something as you said.
.parent {
background-color: yellow;
top: 0;
left: 0;
height: 200px;
width: 200px;
z-index: 1;
}
.child {
background-color: red;
position: relative;
top: 10px;
left: 20px;
height: 50px;
width: 150px;
z-index: 2;
}
.other-guy {
background-color: green;
position: absolute;
top: 40px;
left: 100px;
height: 200px;
width: 200px;
}
<div class="parent">Chillin in the background
<div class="child">I really want to be on top.</div>
</div>
<div class="other-guy">I want to be in the middle!</div>
Check out this article:
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
If this article is right and I understood it correctly, then it's not possible, because yellow and red are part of the same stacking context.
I did accomplish your goal by adding jquery to your fiddle and adding this line of code to actually move the green element into the yellow one:
$(".other-guy").insertAfter(".child");
I want to have an inner div that sites inside different sized container divs, and starts at a fixed left position and then has a width that fills up the rest of the container. I've included some example css below to try to get the point across.
I have to use absolute positioning so can't just float right and set a left-margin. Any ideas of how to make this work with absolute positioning? I've also tried width: auto and some different box-sizing options.
To clarify, the trickiness of this is that the left border has to be fixed, and the left border has to be against the right border of the container. I can't use position: relative, and javascript, but I'd probably end up making .inner1 and .inner2 divs with hard-coded widths before doing that. But hoping to avoid that.
.container1 {
position: relative;
width: 400px;
height: 300px;
}
.container2 {
position: relative;
width: 500px;
height: 300px;
}
.inner {
position: absolute;
top: 0px;
left: 200px;
height: 100%;
width: 100%;
}
Just specify all of the top, left, bottom, and right properties and the box will expand to be at all of those points.
.container {
position: relative;
width: 400px;
height: 300px;
}
.inner {
position: absolute;
top: 0;
left: 200px;
bottom: 0;
right: 0;
}
See the jsFiddle.
I don't get what exactly do you need but why don't you use percentages?
Instead of:
.inner {
position: absolute;
top: 0px;
left: 200px;
height: 100%;
width: 100%;
}
Why don't you use something like:
.inner {
position: absolute;
top: 0px;
left: 50%;
height: 100%;
width: 50%;
}
Setup percentages for left and width attribute accordingly. 40-60, 30-70 and so on.
Hope this helps. If not, please specify a little more.
Regards
This works. Change the width of the outer box to whatever you want and the inner box grows to match it.
.container {
width: 400px;
height: 300px;
}
.inner {
position: relative;
margin-left: 200px;
height: 100%;
}
Edit: here's a fiddle