I have this code
http://jsfiddle.net/4fz5g/2/
<div class='A' id='AA'>
<div class='listContainer'>
This div is cutting Parents inset box-shadow
</div>
</div>
My question is why does the inset box shadow of parent do not overlap the children? Is there a way to make it overlap.
p.s: I do not want to add inset drop shadow to children instead to make it appear as if drop shadow of parent is "casting shadow" over its children.
You need to play with z-index to set the order / visibility of the elements.
The problem is that in the A element, you have also a background. If you set the z-index of the child negative, it will be hidden by the background.
One posibility to solve that would be to create a pseudo element, and set the shadow on it:
.A {
width: 80%;
position: absolute;
top: 0;
height: 300px;
background-color: #408800;
padding: 0px;
}
.A:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 12px;
box-shadow: -12px 0 10px -10px #000000 inset;
z-index: 2;
}
demo
While i don't know if there's a way to avoid this,
adding box-shadow: inherit; to the child element should fix the appearance
as it adds the same inset shadow to it.
example: http://jsfiddle.net/4fz5g/3/
Related
Image attached in this link
In number 9 cell border is over the background color
How do I show the border over the div or background Color and it should be responsive?
<div className="borderOverDiv"><div>
<div className="backgroundClr"></div>
.borderOverDiv{
position: absolute;
border: 1px solid red;
width: calc(100% - 94%);
height: 30px;
border-radius: 10px;
}
.backgroundClr{
background: blue
}
this code as I tried, seems not working
I am assuming that you are new to css so I will try to explain what is going on with this code the best that i can.
The fun part is in .element.active:after
There is a few thing
position: absolute this will allow us to set this element absolutly to container. But witch container? First that has position set to a different value than static or its initial value. That is why .element has position: relative which doesn't do anything on its own.
top, right, bottom, left which tell that this element will be exceeding parent element on every side by 5px.
z-index Simply the higher the value the "closer" this element is to user. initial value is 0 so 1 is placing this element above every other element.
content is required in pseudo-element :after in order to show them. This property just needs to be set and doesn't have to have any value specified.
The reis is just to make it look nicer.
And thats it.
You can use other element inside .element if you feel like it.
For example
<div class="element">
<div class="overlay"></div>
</div>
and it will work just fine if you will follow point form 1 to 3 (point 4 is required, as I said earlier, only in pseudo-element) but it will be less responsive. For example what will you have to do when other element needs this overlay? You will have to use javascript to append .overlay element to .element and with pseudo-element you just need to append class. or just show this overlay on hover. Other advantage is that it look prettier and doesn't bloat you html.
.container {
padding: 5px;
display: flex;
}
.element {
position: relative;
background-color: #0000ff;
padding: 10px 20px;
display: inline-block;
color: #ffffff;
}
.element.active:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
border-radius: 40px;
background-color: rgba(200, 200, 200, .4);
border: 1px solid rgba(200, 200, 200 ,.8);
z-index: 1;
}
<div class="container">
<div class="element">7</div>
<div class="element active">8</div>
<div class="element">9</div>
</div>
replacing className with class should do the trick
Explanation:
I modified a CodePen I found online and now it looks like this.
https://codepen.io/anon/pen/YQqdPq
As you can see on the leftmost side of the table, the shadow shows which is good, but it has the same border as its parents.
I've tried putting border: 0px; in pseudo elements but this doesn't seem to do anything.
Question:
Can I remove the border from the shadow you see on the left and righthandside of the table? Ideally I'd like the border to still overlay the shadows inside, but if this is too fiddly then I can live without that.
Code Excerpt:
Here is the CSS in question
.shadow {
position: relative;
}
.shadow:before {
box-shadow: -15px 0 15px -15px inset;
content: " ";
height: 100%;
top: 0;
left: -15px;
position: absolute;
width: 15px;
}
.shadow:after {
box-shadow: 15px 0 15px -15px inset;
content: " ";
height: 100%;
position: absolute;
top: 0;
right: -15px;
width: 15px;
}
That's not a border. That's a 1px gap between the pseudo elements which looks like a border of 1px.
You can fix it in many ways, the way I would do it is to increase the height of the pseudo element by 1px to cover the gap.
.shadow:before {
height: calc(100% + 1px);
height: -webkit-calc(100% + 1px);// (optional) for older webkit browsers
height: -moz-calc(100% + 1px);// (optional) for older firefox browsers
}
same thing for the ones on the right .shadow:after.
If you're interested, you can learn more about calc.
I'm filling a parent div with dynamically generated child divs. I'd like for the child divs to be bound by the parent (so they can't expand the parent's shape horizontally as they fill with content). At the same time, I'd like for the child div borders to sit on top of the parent div borders, as well as each others. I threw together a diagram to better explain:
What is the best way to accomplish this via CSS? I've looked around, and I can't seem to find a solution that both stacks the borders, but also keeps the child divs restricted by the parent div (on the x axis).
Overlapping borders are always a little tricky. In your case, I wouldn't recommend working with absolute positions and z-indexes – this will only make things more complicated and you won't be able to rely on the native behaviour of block elements anymore.
Let's say your HTML looks like this:
<div class="parent">
<div class="child yellow"></div>
<div class="child blue"></div>
<div class="child red"></div>
</div>
You can achieve the illusion of overlapping children by only applying a top border to the :first-child. Even if you add more divs dynamically to the top, the first one will always be the one that appears to be "on top":
.child {
border-style: solid;
border-width: 0 2px 2px 2px;
background: white;
}
.child:first-child {
border-top-width: 2px;
}
.yellow {
border-color: yellow;
}
.blue {
border-color: blue;
}
.red {
border-color: red;
}
The parent needs a little hack, because if you added a regular border around it, it would be displayed around the children.
.parent {
width: 500px; /* or any other width */
height: 100vh; /* or any other fixed height */
overflow-y: auto; /* make scrollable */
box-shadow: inset 2px 2px 0 black, inset -2px -2px 0 black;
}
The inset box-shadow creates the illusion of solid border on the inside of the parent. To make sure it's not visible underneath the children borders (box-shadows tend to be slightly blurrier than borders), you need to make sure the children have a background colour.
Edit: Here's a demo.
You can influence the stack order in css with z-index but you need to use a position:absolute or position:fixed on these elements.
.div1 {
width: 200px;
height: 100px
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.div2 {
width: 200px;
height: 100px
position: absolute;
top: 190px;
left: 0;
z-index: 2
}
That css should display the .div2 10px overlapping the .div1
If the height is dynamic you can either add it by JS or add on div as child in the next.
Note that each "position" attribute relates to the recent parent position relative or absolute!
If I understand you right, you could place the border of the parent using :after and position absolute, with z-index:-1:
.parent { position: relative; }
.parent:after {
content: '';
position: absolute;
z-index: -1;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
border: 1px solid black;
}
and for the children, you could remove the top border if not the :
first:
.child:not(:first-child) {
border-top: 0;
}
you can also try this one. Define two different classes. "Border" class for border width and style. And a color class. Like this:
<style>
.border {
border: 5px solid;
}
.green {
border-color: green;
border-top-width: 0px;
}
.yellow {
border-color: yellow;
}
/*I do not use a border-top-width to remowe top because this is the first div.*/
.red {
border-color: red;
border-top-width: 0px;
}
</style>
<div class="container">
<div class="border yellow">yellow</div>
<div class="border green">green</div>
<div class="border red">black</div>
</div>
I am working on a CSS3 tabs (Without JS) and having a big problem.
I am trying to make auto height of absolute div so that it can expand or shrink height accordinly but for some reasons it is not working.
I tried to give 100% height to my html,body but still not working. Without putting in more words, Here is JS fiddle.
Here is my relevant CSS:
.content {
background: #3404FC;
position: relative;
width: 100%;
height: 200px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}
.content div {
position: absolute;
top: 0;
left: 0;
/* padding: 10px 40px; */
z-index: 1;
opacity: 0;
}
As you can see blue background is height so why it is not taking auto height. I tried 100% but it is not working at all.
Please help!
You can try this:
.content div{
position: relative;
}/**instead of position: absolute;
you can selected div visibility: visible:
and none-selected div visibility hidden;
Even though you've set the height to 100% of the parent div, in this case content it won't have a height. The reason is, all of your child elements are positioned absolute. This makes the elements go out of the normal flow making the height of the parent div to 0px.
Use this :
body,html,.tabs{height:100%;}
Because you are using margin in tabs, its height will be more thant 100%.
I swear I've done this a hundred times, but for the life of me, I can't figure out why my :before pseudo-element's background is displaying behind the text but not behind the anchor's background. Thoughts?
.button {
background: tomato;
padding: 10px 30px;
margin: 20px 0;
display: inline-block;
}
.button:hover {
margin: 18px 0 22px 2px;
position: relative;
z-index: 2;
}
.button:hover:after {
position: absolute;
background: red;
top:-2px;
left: -2px;
content: "";
z-index: -10;
width: 100%;
height: 100%;
}
<a class="button" href="#">Meow</a>
Sample here: http://jsfiddle.net/cfree/hnKLr/
When you add a z-index value to an element, you create a new stacking context. Every child of that element will stack on top of it.
So when you want to place an element behind its parent, simply don't create a stacking context on the parent. You still need to use a negative z-index though, because the default stack level of the parent will be 0 (in whatever context the element is)
The ::before and ::after pseudo-elements are named a bit confusingly – they behave as if they were children of the matched element, not its siblings.
In this particular case, it seems like a box-shadow would be most appropriate:
.button:hover {
box-shadow: -2px -2px 0 red;
}
Is this the effect you were looking for?