div {
margin: 50px;
position: relative;
background-color: red;
width: 200px;
height: 50px;
border: 2px solid black;
}
div::after {
content: '';
position: absolute;
background-color: green;
width: 100px;
height: 100px;
border-radius: 100%;
top: -25px;
left:50px;
border: 2px solid black;
}
div.overflow-hidden {
overflow: hidden;
}
<div>1st</div>
<div class="overflow-hidden">2nd</div>
1st case: as expected.
2nd case[overflow-hidden]: Middle part of top and bottom border should be green. Looks like circle is not above its parent div's border. Is there any way to make it above it? Whats happening here? Will the z-index work?
Why is this happening?
This is because overflow: hidden; clips the content to the content box.
hidden
Content is clipped if necessary to fit the content box. No scrollbars
are provided.
MDN Web docs - https://developer.mozilla.org/en/docs/Web/CSS/overflow
This can be seen in the first example below as I have changed the border to be transparent.
What can you do?
One way to get around this would be to apply the border using an absolutely positioned pseudo element instead of to the containing div.
div {
background-color: red;
height: 50px;
margin: 50px;
overflow: hidden;
position: relative;
width: 200px;
}
div::after {
background-color: green;
border: 2px solid black;
border-radius: 100%;
content: '';
height: 100px;
left: 50px;
position: absolute;
top: -25px;
width: 100px;
}
div.overflow-with-border {
border: 2px solid transparent;
}
div.overflow-with-pseudo {
padding: 2px;
}
div.overflow-with-pseudo::before {
border: 2px solid black;
box-sizing: border-box;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="overflow-with-border">1st</div>
<div class="overflow-with-pseudo">2nd</div>
Related
Is it possible to make this shape in CSS3?
You can do something like this, using a pseudo selector of after.
CODEPEN LINK
CSS
div {
height: 200px;
background: blue;
position: relative;
width: 400px;
}
div:after {
content: '';
position: absolute;
top: -50px;
left: -200px;
border-top: 300px solid white;
border-left: 300px solid white;
width: 0;
background: #fff;
border-radius: 300px;
}
Please look at the image to understand what I am talking about. I have three box elements that look like what is displayed in the picture. What I want is for the green box to only be displayed overlapping the yellow and not displayed over overlapping the red. The green box needs to reside overlapping both but only visible over the yellow area. Ive tried using z-index, position and opacity in every different manner I could think of, but yet to come up with a solution.
link to image
<div id="one" ></div>
<div id="two" >
</div><div id="three" ></div>
#one{
border: solid 1px black;
width: 300px;
height: 300px;
background-color: red;
position: absolute;
}
#two{
margin-left: 50px;
border: solid 1px black;
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
}
#three{
border: solid 1px black;
width: 100px;
height: 100px;
background-color: green;
position: relative;
}
It's impossible to have elements overlap one layer and then go underneath another layer like you are asking. I know there is some art term for this.
Anyways here is the closest solution is to just fake it and have the green box inside the yellow box:
.outer {
width: 300px;
height: 300px;
position: relative;
outline: 1px solid black;
}
.green {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: -50px;
outline: 1px solid black;
background-color: green;
z-index: 3;
}
.yellow {
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
margin: auto;
outline: 1px solid black;
background-color: yellow;
z-index: 2;
overflow: hidden;
}
.red {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
outline: 1px solid black;
background-color: red;
z-index: 1;
}
<div class="outer">
<div class="yellow">
<div class="green"></div>
</div>
<div class="red"></div>
</div>
Hi I've got follow div:
.box {
width: 100px;
height: 20px;
border: 1px solid black;
}
.box:after {
content: '';
width: 20px;
height: 20px;
background-color: blue;
}
<div class="box"></div>
I would like to add a second div to the .box with pseudo class after. I thought it would work like this, but nothing happens. It should look like this:
How to do this with after?
Thanks.
Try This
.box {
width: 100px;
height: 20px;
border: 1px solid black;
}
.box:after {
content: '';
width: 20px;
height: 20px;
background-color: blue;
display:block;
float:right;
}
<div class="box"></div>
You're code is right, the only thing missing is the property display to that element. Just add a display: block on the :after element. To easily manipulate the pseudo-element, make the main element position: relative, then the :after as position: absolute and place it based on the .box div, something like this :
.box {
width: 100px;
height: 20px;
border: 1px solid black;
position: relative; /* Made it relative */
}
.box:after {
content: '';
position: absolute;
display: block;
width: 20px;
height: 20px;
border: 1px solid blue;
top: -1px; /* To compensate the border on the main element */
background-color: blue;
left: 100%; /* To place it after the main element */
}
If you truly need another div, try adding some javascript, like this
$(document).ready(function() {
$('.box').append('<div class="another-box"></div>');
});
.box {
width: 100px;
height: 20px;
position: relative;
border: 1px solid black;
}
.box:after {
content: '';
width: 20px;
bottom: -1px;
right: -21px;
top: -1px;
position: absolute;
background-color: blue;
}
<div class="box"></div>
Here is the fiddle.
I have two div elements.
<div class="parent">
<div class="child">
</div>
</div>
And CSS code for that.
.parent {
height: 20px;
width: 100px;
background-color: #080;
position: relative;
}
.child {
position: absolute;
width: 80px;
height: 200px;
background-color: #008;
right: -10px;
top: 30px;
}
.child:before {
border-right: 10px solid transparent;
border-bottom: 10px solid #008;
border-left: 10px solid transparent;
top: -10px;
width: 0;
height: 0;
content: "";
position: absolute;
left: 50%;
}
How to position .child:before related to .parent without JS. I know solution with .parent:before, but it is not good for me.
I think this is what you are trying to do.
I think you will find this more robust and scalable.
.parent {
height: 20px;
width: 100px;
background-color: #080;
position: relative;
}
.child {
position: absolute;
width: 80px;
height: 200px;
background-color: #008;
left: 50%;
/* note 50% */
top: 30px;
margin-left: -20px;
/* 2x your arrow size */
}
.child:before {
position: absolute;
border-right: 10px solid transparent;
border-bottom: 10px solid #008;
border-left: 10px solid transparent;
top: -10px;
/* your border size */
margin-left: 10px;
/* your border-size */
width: 0;
height: 0;
content: "";
left: 0;
}
<div class="parent">
<div class="child">
</div>
</div>
You can only position an element absolutely in relation to the closest parent that is itself positioned. In your case, that's .child.
If .child and .child:before are not related in your layout, why not put .child:before in the parent element, either as .parent:before, or as its own element?
Alternatively, if your elements both have fixed widths as in your example, just give the pseudo-element a fixed pixel position as well. Demonstration.
The CSS style:
.outer {
position: relative;
width: 100%;
height: 200px;
background-color: #000;
overflow: hidden;
}
.outer:focus {
outline: 10px solid #00FF00;
}
.inner {
position: absolute;
width: 50%;
height: 200px;
background-color: #F0F;
left: 50%;
}
.inner:focus {
outline: 10px solid #FFFF00;
}
The HTML code:
<div tabindex="0" class="outer">
<div tabindex="0" class="inner">
The problem:
I want to make inner div focusable with an outline border, but because of overflow: hidden; I can't do it. This is only an example. Also, I don't wanna touch the overflow: hidden of the outer div when the focus is on the inner one, so this won't go. Perhaps there's an easy way(code only, no imgs-graphics) to implement some sort of border on the focusable element?
*CSS-HTML code only pls. No JS
Use a negative offset for the outline when the div is focused, like so:
.inner:focus {
outline-offset: -10px;
}
The value should be equal to the outline-width.
As an alternative approach you might also use an inset box-shadow e.g.
box-shadow: inset 0 0 0 10px #ff0;
you can use ::after property
.inner:focus::after {
content: "";
height: 90%;
outline: 10px solid #ffff00;
position: absolute;
top: 10px;
width: 98.1%;
z-index: 99999;
}
You could use border instead of outline and set box-sizing: border-box
.outer {
position: relative;
width: 100%;
height: 200px;
background-color: #000;
overflow: hidden;
}
.outer:focus {
outline: 10px solid #00FF00;
}
.inner {
position: absolute;
width: 50%;
height: 200px;
box-sizing: border-box;
background-color: #F0F;
left: 50%;
}
.inner:focus {
border: 10px solid #FFFF00;
}
<div tabindex="0" class="outer">
<div tabindex="0" class="inner">
You can use either box-shadow: inset or outline with negative outline-offset
.inner:focus::after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* #1 */
box-shadow: inset 0 0 0 4px blue;
/* #2 */
outline: 4px;
outline-offset: -4px;
}