Why z-index doesnt work? - html

I have simple html and css code :
HTML:
<div class="header">
<div class="tip"></div>
</div>
CSS:
.header {
display: block;
width: 260px;
min-height: 222px;
background-color: #252525;
position: relative;
z-index: 5;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
border-radius: 2px;
}
.tip {
display: inline-block;
width: 10px;
height: 10px;
right: 11px;
top: -5px;
transform: rotateZ(45deg);
position: absolute;
z-index: 1;
background-color: red;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
I just want to .tip block was under .header block.
But now it looks like this, although the z-index of .tip is less then z-index of .header:
This is what I want:
For some reason, z-index doesn't work.
It's necessary for me to set z-index on .header block, because I have another blocks on page which have z-index too


To make the child of a parent element have a higher z-index than the parent element, remove the parent's z-index value.
.header {
display: block;
width: 260px;
min-height: 222px;
background-color: #252525;
position: relative;
/*z-index: 5;*/
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
border-radius: 2px;
}
.tip {
display: inline-block;
width: 10px;
height: 10px;
right: 11px;
top: -5px;
transform: rotateZ(45deg);
position: absolute;
z-index: -1;
background-color: red;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
<div class="header">
<div class="tip"></div>
</div>


try changing 1 to -1...and remove z-index: 5 in the first block (header); take a look of this part of the code:
.header {
display: block;
width: 260px;
min-height: 222px;
background-color: #252525;
position: relative;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
border-radius: 2px;
}
.tip {
display: inline-block;
width: 10px;
height: 10px;
right: 11px;
top: -5px;
transform: rotateZ(45deg);
position: absolute;
z-index: -1;
background-color: red;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}

Related

CSS shadow such that some div's look they are behind

Currently I have a HTML & CSS that results in a page like below
However, I want the shadows above B & C tabs so that it looks like they are behind.
Can anyone hele achieve this?
body {
background-color: rgb(245, 165, 61);
--border-rad: 5px;
}
.wrapper {
width: 80vh;
margin: 5%;
}
.tabs {
display: flex;
justify-content: space-around;
}
.tab {
width: 20%;
color: #000;
background-color: #fff;
margin: 2px 2px 0% 2px;
border-top-left-radius: var(--border-rad);
border-top-right-radius: var(--border-rad);
position: relative;
text-decoration: none;
text-align: center;
}
.tab:before,
.tab:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.tab:before {
left: -20px;
border-radius: 0 0 var(--border-rad) 0;
box-shadow: var(--border-rad) 0 0 0 #fff;
}
.tab:after {
right: -20px;
border-radius: 0 0 0 var(--border-rad);
box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}
.content {
background-color: #fff;
height: 75vh;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
text-align: center;
}
<div class="wrapper">
<div class="tabs">
<span class="tab">A</span>
<span class="tab">B</span>
<span class="tab">C</span>
</div>
<div class="content">content</div>
</div>

You need to temper with the z-index of the different elements. Remember you can only modify the z-index if the element itself has a position set (e.g. position: relative)
Below is a working example. Note that I have also added an "active" class to the currently active tab.
You would need to create JavaScript to make it full functional, but this is the starting point.
Good luck!
body {
background-color: rgb(245, 165, 61);
--border-rad: 5px;
}
.wrapper {
width: 80vh;
margin: 5%;
}
.tabs {
display: flex;
justify-content: space-around;
}
.tab {
position: relative;
width: 20%;
color: #000;
background-color: #fff;
margin: 2px 2px 0% 2px;
border-top-left-radius: var(--border-rad);
border-top-right-radius: var(--border-rad);
position: relative;
text-decoration: none;
text-align: center;
}
.tab.active {
z-index: 2;
}
.tab:before,
.tab:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.tab:before {
left: -20px;
border-radius: 0 0 var(--border-rad) 0;
box-shadow: var(--border-rad) 0 0 0 #fff;
}
.tab:after {
right: -20px;
border-radius: 0 0 0 var(--border-rad);
box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}
.content {
position: relative;
z-index: 1;
background-color: #fff;
height: 75vh;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
text-align: center;
}
<div class="wrapper">
<div class="tabs">
<span class="tab active">A</span>
<span class="tab">B</span>
<span class="tab">C</span>
</div>
<div class="content">content</div>
</div>

Just add these to your content and tab css classes:
.content {
position: relative;
z-index: 2;
}
.tab
z-index: 1;
}
Edit: you need the relative positioning for z-index to work.

You can always try the following css witch will give the box the black shadow and the border bottom you want.
box-shadow: rgb(0 0 0 / 25%) 0px 54px 55px, rgb(0 0 0 / 12%) 0px -12px 30px, rgb(0 0 0 / 12%) 0px 4px 6px, rgb(0 0 0 / 17%) 0px 12px 13px, rgb(0 0 0 / 5%) 0px -3px 5px;
border-bottom: solid;
border-width: thin;
z-index: 50;

how to create shadow inside of an element

I've been trying to find a way to have a shadow on the inside of an image but I can only manage an outer shadow. .showSlide is a div element btw
.showSlide {
display: block;
width:100%;
height:350px;
}
.showSlide img {
width: 100%;
height:100%;
border-radius: 15%;
-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;
}

Add this:
.showSlide::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-border-radius: 15%;
-moz-border-radius: 15%;
border-radius: 15%;
box-shadow: inset 0 0 12px rgba(0,0,0,.6);
-moz-box-shadow: inset 0 0 12px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
and edit:
.showSlide {
display: block;
width:100%;
height:350px;
position: relative;
}
.showSlide img {
width: 100%;
height:100%;
border-radius: 15%;
}

Clicking Button on Top of Text Won't Go to URL

So, my button, for some reason, won't go to the URL that is defined when the user clicks directly on the text lying on top of the button. (ie: for my button, "Test Text")
When you click on the button, it always depresses, but it only goes to the linked URL when you click outside of the text's area.
I have tried using a <div> instead of <a>, but no luck with that either.
You can see the button live at http://198.154.213.30/~foster2/index.php/news
Below is the code for my button:
<a class="button3D" href="http://www.google.com" target="_blank">Test Text</a>
<style>
.button3D {
position: relative;
display: block;
width: 200px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -100px;
background: #650404;
font-family: sans-serif;
text-align: center;
line-height: 50px;
font-size: 24px;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
border: 1px solid #4e0202;
-webkit-box-shadow: 0 5px 15px -5px #222;
-moz-box-shadow: 0 5px 15px -5px #222;
box-shadow: 0 5px 15px -5px #222;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
}
.button3D:before {
content: "";
position: absolute;
top: -9px;
left: 0px;
width: 178px;
height: 0px;
border: 11px solid transparent;
border-bottom: 8px solid #650404;
border-top: 0;
}
.button3D:after {
content: "";
color: #c56338;
line-height: 180px;
font-size: 16px;
position: absolute;
top: -8px;
left: 1px;
width: 178px;
height: 0px;
border: 10px solid transparent;
border-bottom: 7px solid #891414;
border-top: 0;
}
.button3D:active {
width: 158px;
height: 41px;
top: 50%;
left: 50%;
margin-top: -33px;
margin-left: -79px;
line-height: 36px;
font-size: 22px;
color: #eee;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
border: 1px solid #3c0101;
background: #4e0202;
border-top: 0;
-webkit-box-shadow: 0 0 0 0;
-moz-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
}
.button3D:active:before {
top: 0;
height: 42px;
width: 158px;
left: -12px;
padding: 0 1px;
border: 11px solid #b3b294;
border-bottom: 8px solid #deddad;
border-top: 0;
}
.button3D:active:after {
content: "";
top: 0;
height: 50px;
width: 182px;
left: -13px;
border: 0;
-webkit-box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
-moz-box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
}
</style>
Appreciate any input/insight you can provide for me as to how I can fix this problem.

I think it is because the link is moving. When you click and hold a link you can drag off the link and it will not navigate. It appears that the moving link is triggering this functionality. The only thing I can think that you could do is use JavaScript onmousedown to navigate.

Stretch div to max size

My css:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: 100%;
overflow: scroll;
position: absolute;
}
#content {
background-color: #fff;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
}
What i want:
What i get:
Red = absolute header
White = #main with "blue" scrollbars
Green = #content border with the text in it.
I guess it is quite easy to solve but i still couldnt manage after trying for ages :P
Updated/simplified jsfiddle:
http://jsfiddle.net/YAgW2/9/

Your CSS should be:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: auto;
overflow: scroll;
position: absolute;
}
#content {
background-color: #fff;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
width:auto;
}

Use the following CSS:
#main {
display: block;
top: 0px;
bottom: 0px;
height: auto;
margin-top: 55px;
max-width: 100%;
overflow: scroll;
position: absolute;
background-color: green;
}
#content {
white-space: nowrap;
padding: 5px;
color: white;
background-color: red;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #eee;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px #000;
box-shadow: inset 0 0 5px #000;
margin: 5px;
}
And the following HTML:
<div>
<div id="main">
</div>
<div id="content" style="position:absolute">
Try to extend this text
</div>
</div>

Could you not move #content outside of #main and position it where you want, i.e. on top of #main?

Adding float: left; to #content solves the display issue!

Adding a glow to 3 sides using CSS

I have a box which overlaps another to form a sort of L shape, I am trying to achieve a glow around the whole of the L shape which therefore requires a glow on only 3 sides of one of these boxes.
I've tried using the box-shadow property but can't seem to get it to only work for 3 of the sides, is this the correct method to use or is there another method using borders I could use to achieve a glow on the 3 sides?
Here is the code I've been trying to use
-moz-box-shadow: 0 -1px 5px #80abc6;
-webkit-box-shadow: 0 -1px 5px #80abc6;
box-shadow: 0 -1px 5px #80abc6;

You could use the clip property:
div {
width: 100px;
height: 30px;
margin: 30px;
clip: rect(-15px,115px,45px,0);
position: absolute;
-moz-box-shadow: 0 -1px 15px #80abc6;
-webkit-box-shadow: 0 -1px 15px #80abc6;
box-shadow: 0 -1px 15px #80abc6;
}
Demo: http://jsfiddle.net/QBQJn/

You can do it with css :after property. Like this:
div{
width:100px;
height:30px;
-moz-box-shadow: 0 -1px 15px #80abc6;
-webkit-box-shadow: 0 -1px 15px #80abc6;
box-shadow: 0 -1px 15px #80abc6;
margin:30px;
position:relative;
}
div:after{
content:'';
width:10px;
height:100%;
background:#fff;
position:absolute;
top:0;
left:-10px;
}
Check this http://jsfiddle.net/QBQJn/1/

Here's one way to do it: http://jsfiddle.net/thirtydot/Wec5h/
HTML:
<div id="l">
<div id="v"></div><div id="h"></div>
</div>
CSS:
#l {
padding: 20px;
border: 1px solid red;
float: left;
}
#v, #h {
-moz-box-shadow: 0 0 5px #80abc6;
-webkit-box-shadow: 0 0 5px #80abc6;
box-shadow: 0 0 5px #80abc6;
display: inline-block;
vertical-align: bottom;
position: relative;
}
#v {
width: 48px;
height: 192px;
}
#h {
width: 96px;
height: 48px;
}
#v:after {
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 38px;
left: 0;
height: 20px;
background: #fff;
}
#h:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 20px;
background: #fff;
}