I've run into a bit of an issue while using z-index. When I add z-index to an id so that it does not overlap another div I have, it makes the image highlight on click, like it would on a double click.
This only happens in Firefox. In Chrome and IE 9,8 and 7, it does not highlight on click. I am using Firefox 17.0.1. What might be causing this? My ids CSS looks like this:
#brand-content, #brand-content>img
{
width:100%;
height:100%;
position: relative;
top:0px;
z-index:-1;
}
The HTML I have on the page is just:
<head>
<link rel="stylesheet" type="text/css" href="../stylesheet.css">
</head>
<body>
<?php
include ("../includes/sidebar.php");
?>
<div id="brand-content">
<img src="../images/IMG_78707.jpg">
</div>
</body>
Here's a guess demo for what you want: http://jsfiddle.net/YVw58/2/
HTML Part:
<div id="parent">
This is parent.
<div id="compare">compare</div>
<div id="childBelow">below</div>
<div id="childUp">up</div>
</div>
CSS Part:
#parent {
background-color: #f66;
}
#childBelow {
background-color: #6f6;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 100px;
z-index: -1;
}#parent {
background-color: #f66;
}
#childBelow {
background-color: #6f6;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 100px;
z-index: -1;
}
#childUp {
background-color: #66f;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 20px;
}
#compare {
position: absolute;
left: 50px;
top: 50px;
background-color: #ccc;
width: 160px;
height: 80px;
}
#childUp {
background-color: #66f;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 20px;
}
#compare {
position: absolute;
left: 50px;
top: 50px;
background-color: #ccc;
width: 160px;
height: 80px;
}
Of course, different result is caused by the version of web broswers. I've tested on Firefox 13.0.1, Chrome 23.0, Opera 12.0 and IE 9.0, all of which have the expected result.
Another thing you should pay attention to is that elements with smaller z-index will not receive events (e.g.: mouse click) if the event area is covered by elements with larger z-index, as shown in the demo before.
You may also have a look at z-index for more details at http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/.
Related
This question already has answers here:
Hole in overlay with CSS
(6 answers)
Closed 10 months ago.
My goal is to achieve something similar to .
This example image uses 4 semi-transparent black squares, on the right, left, top and bottom to simulate the effect I'm after
Using code that looks somewhat like this:
.wrapper {
position: relative;
width: 400px;
height: 200px;
}
.overlay {
position: absolute;
background-color: #0005;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.transparent-box {
background-color: #fff0;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 80px;
}
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<img src="https://picsum.photos/400/200" alt="">
<div class="overlay">
<div class="transparent-box"></div>
</div>
</div>
</body>
</html>
I would like to be able to get this effect with while using oneelement for the background and one element making the "window" so that for example adding rounded courners and similar styling could be done easier.
I've tried playing around with blend modes, but I'm not sure if it doesn't support that or if I've just set it up wrong.
A nice trick to get the same effect, is to use a box-shadow on the overlay:
.overlay {
box-shadow: 0px 0px 1px 100vmax rgba(0,0,0,0.5);
}
In this case, 100vmax fills up the whole page.
you could use two images with the background fixed property to create a similar effect.
Check this fiddle link jsfiddle
$(".transparent-box").draggable();
.overlay {
height: 300px;
width: 300px;
background-image: linear-gradient(0deg, #464646fc, #383333ab), url('https://via.placeholder.com/300/0000FF/808080%20?Text=Digital.com');
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.transparent-box {
height: 30%;
width: 30%;
background-image: url('https://via.placeholder.com/300/0000FF/808080%20?Text=Digital.com');
background-repeat: no-repeat;
background-attachment: fixed;
position: absolute;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="overlay">
<div class="transparent-box"></div>
</div>
</body>
</html>
if you change the opacity of your transparent-box (div) and set the
color to white, you will get the translucent effect that you showed
in your example link.
//css of transparent-box linked below
.transparent-box {
background-color: white;
opacity: 0.6;
position: left;
top: 50px;
left: 50px;
width: 100px;
height: 80px;
}
if you want a shadow around and in the middle the normal picture you
need to use the shadow box:
.transparent-box {
opacity: 0.9;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 80px;
box-shadow: 0 0 0 100pc rgba(0, 0, 0, .8);
}
Everything was right, except for the colors. I just changed the background and that's it.
I hope that's what you wanted
.wrapper {
position: relative;
width: 400px;
height: 200px;
}
.overlay {
background-color: #0000003b;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.transparent-box {
background-color: #ffffff78;
position: absolute;
top: 4rem;
left: 50px;
width: 100px;
height: 80px;
}
<div class="wrapper">
<img src="https://picsum.photos/400/200" alt="">
<div class="overlay">
<div class="transparent-box"></div>
</div>
</div>
I'm trying to make a backdrop for a menu that will be used to detect if the user has clicked somewhere other than on the menu and close the menu.
For some reason despite setting
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
The backdrop won't stretch beyond one of the parent divs.
I've distilled the webpage to something simple and stuck it here http://codepen.io/ben_irule/pen/LZWwjL?editors=1100
<!DOCTYPE html>
<html>
<head>
<style>
.app-layout {
height: 100%;
}
.layout {
height: calc(100% - 35px);
display: block;
}
footer {
height: 35px;
background-color: green;
}
.content {
position: relative;
/* attribute of doom*/
transform: translate3D(0, 0, 0);
display: block;
height: 100%;
margin-left: 320px;
margin-right: 280px;
}
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="app-layout">
<div class="layout">
<div class="content">
<div class="menu-backdrop"></div>
</div>
</div>
<footer></footer>
</div>
</body>
</html>
I've noted one transform attribute that when disabled stops the parent div from being problematic. However when I disable the equivalent attribute in the full blown app it does not resolve the issue.
I'm interested in understanding what conditions will result in a fixed position element being bound by a parent div.
I've been searching the web all morning but haven't found anything resembling my current issue.
.content {
position: relative;
/* attribute of doom*/
transform: translate3D(0, 0, 0);
display: block;
height: 100%;
margin-left: 320px;
margin-right: 280px;
}
Margin left and margin right is what stopping you to stretch beyond what it is now. Try reducing it.
Here is a better way of doing it. See if this solves your problem. Since you have a specific numbered margin, add those to menu-backdrop.
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin-left: -320px;
margin-right: -280px;
margin-bottom: -32px;
background-color: blue;
}
This will pull the backdrop beyond the width of the containing div. A negative margin usually does the job:
.menu-backdrop {
position: fixed;
margin-left:-30px;
margin-right:-30px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
Perhaps changing your layout to this:
<body>
<div class="app-layout">
<div class="layout">
<div class="menu-backdrop"></div>
<div class="content">
Need to stretch more!!
</div>
</div>
<footer>Footer</footer>
</div>
</body>
and styling similar to:
.menu-backdrop {
position: fixed;
max-width:750px;
margin:auto;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
I have a kind of "range display", where I use elements to display the current position within a range. See the example https://jsfiddle.net/juwxdb5m/ or the following code.
HTML:
<h1>Range display with fixed sizes (works correctly)</h1>
<div class="my-fixed-frame">
<div class="my-fixed-chart">
<div class="my-fixed-point" style="bottom:0%;left:0%;"></div>
<div class="my-fixed-point" style="bottom:50%;left:50%;"></div>
<div class="my-fixed-point" style="bottom:100%;left:100%;"></div>
</div>
</div>
<h1>Range display with relative sizes (works incorrectly)</h1>
<div class="my-relative-frame">
<div class="my-relative-chart">
<div class="my-relative-point" style="bottom:0%;left:0%;"></div>
<div class="my-relative-point" style="bottom:50%;left:50%;"></div>
<div class="my-relative-point" style="bottom:100%;left:100%;"></div>
</div>
</div>
CSS:
.my-fixed-frame {
background-color: gray;
height: 90px;
position: relative;
width: 160px;
}
.my-fixed-chart {
background-color: silver;
display: inline-block;
bottom: 8px; left: 8px; right: 8px; top: 8px;
margin: auto;
position: absolute;
}
.my-fixed-point {
background-color: lime;
height: 16px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
width: 16px;
}
.my-relative-frame {
background-color: gray;
height: 90px;
position: relative;
width: 160px;
}
.my-relative-chart {
background-color: silver;
display: inline-block;
bottom: 25%; left: 25%; right: 25%; top: 25%;
margin: auto;
position: absolute;
}
.my-relative-point {
background-color: lime;
height: 50%;
margin-bottom: -25%;
margin-left: -25%;
position: absolute;
width: 50%;
}
When I use fixed sizes, I can implement the design as desired. The "point" elements are within the parent element, respectively within its frame.
But I didn't found a solution, when I use relative sizes for the child elements.
Maybe this is what you want:
https://jsfiddle.net/xoq95xaa/
The main changes are that I took the green squares out of the inner container (which is what you kind of did using negative margins in the first version), removed any margins, inserted a forth element (reacting to your comment), changed the size to 25% width and height and changed the bottom and left values to 25% steps (0, 25, 50, 75).
I found a solution which works as desired, see also https://jsfiddle.net/juwxdb5m/1/.
HTML:
<h1>Range display with relative sizes</h1>
<div class="range-display">
<div class="range-cocoon">
<div class="range-point" style="bottom:0%;left:0%;"></div>
<div class="range-point" style="bottom:33.333%;left:33.333%;"></div>
<div class="range-point" style="bottom:66.666%;left:66.666%;"></div>
<div class="range-point" style="bottom:100%;left:100%;"></div>
</div>
</div>
CSS:
.range-display {
background-color: gray;
height: 90px;
position: relative;
width: 160px;
}
.range-cocoon {
background-color: silver;
bottom: 0;
height: 75%;
left: 0;
position: absolute;
width: 75%;
}
.range-point {
background-color: lime;
height: 33.333%;
position: absolute;
width: 33.333%;
}
I have div inside a div as below
<div id="locations">
<div id="h-dragbar"></div>
</div>
and css as below
#locations {
height: 50px;
width: 100%;
position: relative;
z-index: -1;
}
#h-dragbar{
background-color:black;
width:100%;
height: 3px;
position: absolute;
cursor: row-resize;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover{
background-color:blue;
}
but hover on div with id h-dragbar is not working. You can test the code here demo.
What am I doing wrong? Thanks in advance.
In the new example jsFiddle which you've provided, you're setting a z-index of -1 to the parent div i.e. #locations which is why you're unable to perform the hover function on its child div i.e. #h-dragbar. You will need to remove the negative z-index on #locations and then it'll work fine.
Update:
I've checked your latest fiddle and instead of using a negative z-index for #locations in order to give priority to #v-dragbar, you can achieve the same by using a high z-index for #v-dragbar, for e.g. z-index: 9999, and a relatively smaller z-index for #locations, for e.g. z-index: 9998. It'll work perfectly this way. Here's a demo:
body {
width: 100%;
height: 500px;
}
#wrapper {
width: 100%;
height: 100%;
}
#explorer {
width: 13%;
min-height: 100%;
height: 100%;
position: relative;
float: left;
}
#v-dragbar {
background-color: black;
height: 100%;
float: right;
width: 2px;
cursor: col-resize;
z-index: 9999;
position: relative;
}
#h-dragbar {
background-color: black;
width: 100%;
height: 2px;
cursor: row-resize;
position: absolute;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover {
background-color: blue;
}
#v-dragbar:hover {
background-color: blue;
}
#locations {
height: 50%;
width: 100%;
position: relative;
z-index: 9998;
/*imp*/
}
<div id="wrapper">
<div id="explorer">
<div id="v-dragbar"></div>
<span style="clear: both;"></span>
<div id="locations">
<div id="h-dragbar"></div>
</div>
<div id="datapoints">
</div>
</div>
<div id="explorer">
</div>
</div>
It's not working because of the negative z-index - you're basically putting the whole thing behind the body element, rendering it non-hoverable, non-clickable, etc. We can't help further without more context, but you'll need to change your strategy a bit for this to work.
Your example works fine…
However, try:
#h-dragbar:hover{
background-color:blue !important;
}
If now it works, for you, it means that some other CSS instance has priority.
If you cannot make a positive z-index, make a z-index: 0; and check. It works:
#locations {
height: 50px;
width: 100%;
position: relative;
z-index: 0;
}
#h-dragbar{
background-color:black;
width:100%;
height: 3px;
position: absolute;
cursor: row-resize;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover{
background-color:blue;
}
<div id="locations">
<div id="h-dragbar"></div>
</div>
The HTML:
<div id="broadcast">
<div id="broadcast_header">
Neighbourhood Broadcast
</div>
</div>
The CSS:
#broadcast_header
{
background-color: #A0522D;
width: 100%;
height: 20px;
position: relative;
top: -20px;
font-weight: bold;
}
Firefox: All fine, header appears 20px above the div, its cool.
IE: Refuses to show div(broadcast_header)!
Overflow: visible
doctype definition: Given
My input: Suppose change top to - top: -5px; It shows the div(header) partially.
Thank you :].
Add body { margin:0 } in your CSS.
This works differently. The surrounding element (#broadcast) has to have the position: relative; property. Then you can position (#broadcast_header) relative to this one by using position: absolute;
#broadcast_header
{
background-color: #A0522D;
width: 100%;
height: 20px;
position: absolute;
top: -20px;
font-weight: bold;
}
#broadcast
{
position: relative;
}