.main-page {
width: 90%;
height: 100%;
z-index: 999;
position: relative;
}
.menu {
width: 350px;
margin: 32px 852px 171px 0;
padding: 21px 21px 0px 40px;
box-shadow: 0 3px 18px 0 rgba(35, 41, 62, 0.13);
background-color: #ffffff;
position: absolute;
float: right;
top: -50px;
left: 105px;
border-radius: 8px;
z-index: 9999;
}
{{start component}}
<div class="menu"> </div>
{{end component}}
<div class="main-page">
</div>
We want to display the menu on top of the main page but it is appearing behind parts of the main page when scrolling. How do we put the menu on top of the main page using css?
We have tried using the z-index but that did not work. We also tried adding an opacity to change the stacking context but that did not work either.
Just on top or always pinned to the top when scrolling?
I've just disabled few lines of your css and menu is on top:
.main-page {
width: 90%;
height: 100%;
/* z-index: 999; */
/* position: relative; */
}
.menu {
width: 350px;
margin: 32px 852px 171px 0;
padding: 21px 21px 0px 40px;
box-shadow: 0 3px 18px 0 rgba(35, 41, 62, 0.13);
background-color: #ffffff;
/* position: absolute; */
/* float: right; */
top: -50px;
left: 105px;
border-radius: 8px;
/* z-index: 9999; */
}
https://jsfiddle.net/k25cuax4/
Those two elements are siblings in your HTML code. However, a typical relative/absolute position pair where the absolutely positioned element is on top of the other one has position: relative for the parent element and position: absolute for the child.
So you eiter should change the HTML structure accordingly (i.e. move .menu into .main-page), or you can try to apply a negative z-index to .main-page to move it to the background. (i.e. z-index: -1).
Related
I created custom modal with css :
.backdrop{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
z-index: 50;
}
.modal-box{
position: fixed;
top: 5vh;
left: 30vw;
width: 40vw;
padding: 16px;
z-index: 100;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
text-align: center;
border-radius: 15px;
}
when the modal is too high i cant access to the bottom of the model.
which property I missing ?
I think position: fixed is screen fixed..
So, If you want to scroll, You have to change fixed -> absolute.
Your modal's height is longer than the viewport.
Add a bottom attribute to prevent its height to go under the fold and add an overflow attribute so you can scroll within the modal.
bottom: 5vh;
overflow: auto;
I have two divs on top of each other (adjoined) and they booth as one unit shall have one box-shadow. Now the upper div gives shadow on the lower div which I don't want. I have tried to manipulate it with a "z-index:2" to be more on top but no luck.
I would like to hide the bottom shadow of the upper div and hide the top shadow of the lower div
Also I don't want the shadow to fold into the adjoined sides. The two divs should be one unit having one shadow
In my example here I have simpified the html
<div class="upper-box" style="width:100px;height:100px;">
</div>
<div class="lower-div" style="width:100px;height:100px;">
</div>
In the jsfiddle the css is all in original and here goes all the work of change.
.upper-box {
border-top: 0 none;
margin-bottom: 2px;
margin-top: -2px;
overflow: auto;
position: relative;
padding-top: 0;
/* Expanded panel gets emphasized by a shadow */
box-shadow: 0px 6px 50px 7px rgba(255,255,255,0.75),
0px 6px 50px 7px rgba(88,88,88,0.75),
0px 6px 50px 7px rgba(88,88,88,0.75),
0px 6px 50px 7px rgba(88,88,88,0.75)
;
z-index: 3;
border-style: solid;
border-color: #000000;
border-width: 0px;
position: relative;
}
.lower-div {
border-bottom: 0px;
box-shadow: 0px 6px 50px 7px rgba(88,88,88,0.75);
z-index: 2;
border-style: solid;
border-color: #000000;
border-width: 0px;
}
I would like to hide the bottom shadow of the upper div and hide the top shadow of the lower div
Also I don't want the shadow to fold into the adjoined sides. The two divs should be one unit having one shadow
Here is my live demo
https://jsfiddle.net/y289sdeb/
You could use a pseudo element, like this
.upper-box {
position: relative;
width: 100px;
height: 100px;
background: white;
}
.lower-div {
position: relative;
width: 100px;
height: 100px;
background: white;
}
.upper-box::after,
.lower-div::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75);
z-index: -1;
}
<div class="upper-box">
</div>
<div class="lower-div">
</div>
Based on a comment, a wrapper can be used
.wrapper {
position: relative;
display: inline-block;
}
.upper-box {
position: relative;
width: 100px;
height: 100px;
}
.lower-div {
position: relative;
width: 100px;
height: 100px;
}
.wrapper::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75);
z-index: -1;
}
<div class="wrapper">
<div class="upper-box">
</div>
<div class="lower-div">
</div>
</div>
I'm trying to add a box shadow on two elements, each with variable width. My desired result looks like this:
I've been trying to get to this result with a pseudo element covering the overlapping box shadows, but because they need to have transparency, I can't seem to find a solution in which there are neither small overlaps at the edges of the boxes nor the pseudo element adjusts to the correct width.
The top box does also not necessarily need a top border to solve my problem.
Fiddle
HTML:
<div>
<p></p>
</div>
<div>
<p></p>
</div>
SCSS:
div {
display: inline-block;
margin: 75px;
width: 200px;
height: 50px;
position: relative;
p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
}
&, p {
background: #ededed;
}
}
div:last-child p {
width: 150px
}
div {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
p {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
}
Edit:
Normally I wouldn't consider JS for layout but since in my particular case the boxes won't be visible until a user interaction occurs, I've used a script to solve my problem.
The script figures out if the top element is bigger than the bottom one when the dom is ready and adds a "big" or "small" class to it respectively. By knowing that, we know which element the pseudo-element's width should inherit. As long as the elements don't get resized in a way that would change which element is bigger, this works fine.
There is also a much cleaner solution without the need for JS and one pseudo element less in case one only needs box-sizing blur and no spread.
Fiddles:
Blur and spread combined (JS),
Only blur, no spread (No JS)
The end result is not quite perfect as you can see in this screenshot where all the white background is replaced with black:
When you look at the left box's top left, you can see that the border shadow has a slight curve.
Anyway, it's close enough to me.
If someone finds a solution with a similar result as in the first fiddle using only css, I would really appreciate it.
You have an easy solution for this, but it is an experimental feature and it has limited support.
Using a filter: drop shadow on the base element, the drop shadow applies to the composite result of this element, and all the descendants
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 0,0,0.7));
filter: drop-shadow(0px 0px 2px red);
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach, that will run in any browser, using pseudo elements for the shadows:
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 2px 6px rgba(0,255,0,0.7);
z-index: -10;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach is to clip the shadows. That is poorly suported, and needs lots of manual adjustements, but the end result is probably the best looking.
Demo working only in webkit
div {
display: inline-block;
margin: 75px;
width: 300px;
height: 50px;
position: absolute;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 100px;
width: 200px;
margin: 0px;
}
div, div p {
background: #ededed;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 15px 15px rgba(255,0,0,0.2);
z-index: -10;
}
p:after {
-webkit-clip-path: polygon(0% 30px, 230px 30px, 260px 60px, 100% 100%, 0% 100%);
}
div:after {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 260px 100%, 230px 80px, 0% 80px);
}
<div>
<p></p>
</div>
If you really need a plain color background instead of a background image, this shall work:
I used a div to create the empty area.
<div class="shad">
<div class="cover1"></div>
<p></p>
</div>
<div class="shad">
<div class="cover2"></div>
<p></p>
</div>
The paragraphs are set to same size as div.shad.
div.shad {
display: inline-block;
margin: 75px;
width: 250px;
height: 350px;
position: relative;
background: #ededed;
p {
position: absolute;
top: 0%;
left: 0;
width: 250px;
height: 350px;
}
.cover1 {
position: relative;
float: right;
margin-top: -2px;
margin-right: -2px;
width: 50px;
height: 50px;
background-color: white;
border-left: 2px solid rgba(0, 0, 0, 0.2);
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.cover2 {
position: relative;
float: right;
margin-top: 50px;
margin-right: -2px;
width: 50px;
height: 300px;
background-color: white;
border-top: 2px solid rgba(0, 0, 0, 0.2);
border-left: 2px solid rgba(0, 0, 0, 0.2);
}
}
div.shad {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
I don't know how in this case implementation margin-bottom for position: absolute element.
This is css of my element:
font-family: FuturaRoundBold;
display: none;
position: absolute;
left: 15%;
top: -5%;
color: #000;
width: 75%;
padding: 1%;
background-color: rgba(233, 233, 233, 1);
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
z-index: 2;
Thanks for any ideas!
margin-bottom will only do anything to an absolutely-positioned element if the element has no top property.
Remove the top: -5% and then your margin-bottom will work.
Or as mentioned in the comments you can also add a transparent div like this
<div class="spacer"></div>
inside your outside div
.spacer {
height: 50px;
margin: 0 0 -50px 0;
/* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}
courtesy : Joey
I am trying to achieve this effect where a photo gets a repeating pattern overlayed over the entire photo when the user place his mouse over the photo.
Problem: I do not seem to be able to make the overlay div overlay the photo completely. How should this be done?
JSfiddle: http://jsfiddle.net/KDyKH/2/
Edit: Updated the fiddle
CSS
#container {
position: relative;
padding: 10px;
width: 1000px;
height: 500px;
background: blue;
}
.photo_box {
padding: 8px 10px 11px 10px;
background: #fff;
-webkit-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-block;
position: relative;
}
.photo {
position: absolute;
z-index: 0;
margin-bottom: 13px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.photo_tint {
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
background: red;
-moz-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
}
HTML
<div id="container">
<div class="photo_box">
<img src='http://www.kurzweilai.net/images/Google-logo.jpg' class="photo">
<div class="photo_tint"></div>
</img>
</div>
</div>
In addition to adding left and top properties to .photo_tint, you also need to make .photo_box relatively positioned (it wasn't before you edited your question).
.photo_box {
position: relative;
}
.photo_tint {
left:0;
right:0;
}
http://jsfiddle.net/KDyKH/5/
The absolute position's left/top/right/bottom attributes work off the last element higher in the hierarchy with position set to relative or absolute. If no parent elements have position set to relative/absolute, the body is used. In your case, the closest relatively positioned element was #container, so when left and top were set on .photo_tint it used #container's origin and not .photo_box's origin as needed to achieve the desired effect.
Additionally, if an element is set to position:absolute, and no left/top/right/right properties are set, the element will not behave as absolute (see this question).
.photo_tint {
position: absolute;
z-index: 100;
background: red;
top:0; left:0;
width:100%; height:100%;
}
???
http://jsfiddle.net/tFbbM/1/
Just position the photo_tint div using top and left. http://jsfiddle.net/OhMrBigshot/gEdJu/
z-index:-1 on the image or z-index:2 on the div
#container {
position: relative;
width: 500px;
height: 500px;
background: blue;
}
.photo {
position: relative;
width: 300px;
height: 100px;
background: green;
}
.photo_tint {
position: absolute;
z-index: 1;
background: red;
width: 300px;
height: 100px;
top:0px;
}