I have a fixed menu at the top with a z-index of 999 (to stop anything appearing in front of it in theory). I also have a div that is designed to scroll horizontally. Why are the overflow properties on the scrolling div making it appear on top of the menu bar?
Scrolling div CSS:
.product-viewer {
width: 85%;
margin-left: 15%;
display: inline-block;
border-top-left-radius: 30px;
border-top-left-radius: 3vmax;
border-bottom-left-radius: 30px;
border-bottom-left-radius: 3vmax;
height: 300px;
height: 30vmax;
background-color: #202020;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
z-index: 0;
}
Menu bar CSS (#menu.fix is when the menu is fixed as it is a "sticky" menu):
#menu {
width: 100%;
height: 50px;
height: 5vmax;
background-color: rgba(0, 0, 0, 0.8);
background-blend-mode: hard-light;
text-align: center;
overflow: hidden;
line-height: 50px;
line-height: 5vmax;
display: inline-block;
}
#menu.fix {
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
Link to site: https://www.inquaress.com/ranges/beach
Your .cover-image element has z-index: 0 !important; and that makes it flow under the following element. You should check your markup as your menu is a child element of .cover-image and your following element .section.no-select doesn't have z-index definitions thus interpreted by the browser to go over the previous element.
Your fix would be just to change your z-index something like
.cover-image {
height: 600px;
height: calc(100vh - 15vmax);
max-height: 75vh;
z-index: 1 !important;
}
Related
Take a look at this fiddle: https://jsfiddle.net/hkbynkmf/1/
How do I let the green border flow around all the divs, with no div "overflowing" the border? The upper div is OK, but the lower one is not.
Also, I need some distance between the divs;
I know that padding and margin is transparent, so I chose (a green) border to illustrate my point. In the end, the clearance should be transparent.
HTML:
body {
position: relative;
background-color: #ff0000;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 0px;
border: 10px solid #190;
margin: 0px;
}
#header {
position: relative;
margin:0 auto; /* div will be H-centered */
top: 10px;
left: 0px;
bottom: 0px;
right: 0px;
width: 960px;
height: 250px;
background-color: #DDDDDD;
overflow: hidden; /* Keep all sub-elements inside this div */
}
#intro {
position: relative;
margin:0 auto; /* div will be H-centered */
top: 15px;
left: 0;
bottom: 0px;
right: 0px;
width: 960px;
height: 150px;
background-color: blue;
overflow: hidden; /* Keep all sub-elements inside this div */
}
<body> <!--position: relative;-->
<div id="header"> <!--position: relative;-->
</div>
<div id="intro"> <!--position: relative;-->
</div>
</body>
You're using the top attribute to move your intro div 15px down, below the header. This is causing the 15px overlap with the container. When positioning items this way you should consider using margin to apply the change, rather than the positioning attributes of top, right, bottom or left.
You have a lot going on with your CSS which is making the stylesheet much more complicated than it needs to be. I have simplified your CSS as follows to achieve the same effect:
body {
background-color: #ff0000;
border: 10px solid #190;
margin: 0px;
padding: 0px;
}
a img {
border:none;
}
#header {
background-color: #DDDDDD;
height: 250px;
margin:0 auto;
overflow: hidden;
width: 300px;
}
#intro {
background-color: blue;
height: 150px;
margin:15px auto 0;
overflow: hidden;
width: 300px;
}
See updated fiddle
In your code, the #intro is positioned 15px below the #header. Doing so leaves no place for the div in body.
Not sure what you are trying to achieve here with position: relative; but the #intro can be written like
#intro
{
margin:10px auto;/* div will be H-centered */
width: 300px;
height: 150px;
background-color: blue;
overflow: hidden;/* Keep all sub-elements inside this div */
}
Using the margin top property on the #intro div will allow the green border to flow, while also having the space in between the divs. Here is the fiddle:
https://jsfiddle.net/hkbynkmf/17/
#intro
{
position: relative;
margin:15px auto 0px auto /* div will be H-centered */
left: 0;
bottom: 0px;
right: 0px;
width: 300px;
height: 150px;
background-color: blue;
overflow: hidden; /* Keep all sub-elements inside this div */
}
I am trying to implement a popup menu in html using z-index. The page is composed of a top bar an a tab bar below it.
I want to apply box-shadow to both of them, so I can't use position:static.
The tabs-bar should have a z-index larger than the nav-bar's so it hides the box-shadow of the nav-bar (so when I hide the tabs-bar I would like to see the box-shadow of the nav bar)
The drop down menu should be place on top of both, but for some strange reason, it is placed on top of the nav-bar, but behind the tab-bar, although its z-index is set to a value higher than both.
I read about z-index contexts, but I can't seem to understand what is going on here.
here is a link to codepen:
http://codepen.io/anon/pen/WvgMXX
HTML:
<div class="body">
<div class="container">
<div class="navbar">
Nav bar
<div class="menu"> drop down menu</div>
</div>
<div class="tabs"> tabs bar </div>
</div>
</div>
css:
.body {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
background-color: gold;
position: static;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
margin: 0;
background-color: green;
}
.navbar {
width: 100%;
margin-bottom: 0;
z-index: 100;
box-shadow: 0px 3px 11px -5px #000;
height: 30px;
background-color: red;
position: relative;
}
.tabs {
width: 100%;
font-size: 1.1em;
box-shadow: 0px 3px 11px -5px #000;
z-index: 101;
position: absolute;
height: 30px;
background-color: gold;
top: 30px;
}
.menu {
width: 6em;
height: 6em;
position: absolute;
left: 200px;
background-color: white;
z-index: 2000;
}
Any ideas?
Your dropdown menu is contained in .navbar. A z-index value of child wouldn't affect if the parent's z-index is smaller to item in comparison. You need to increase .navbar z-index.
See the updated pen here http://codepen.io/anon/pen/VLGXvP
On a side note, there's huge z-index abuse, you can step with multiples of 3s or 9s. using 100 and 2000 is incredible waste. Same goes with unnecessary positioning.
Since your dropdown menu is placed inside the nav bar, you can set it's z-index as high as you want, but it will never be higher than the one of it's parent. You could put it outside the nav bar: http://codepen.io/anon/pen/Wvgzrg
I am not 100% sure what you want to achieve, but if you remove the "position: relative" property from your navbar, it works fine. I tried it in Chrome.
.navbar {
width: 100%;
margin-bottom: 0;
z-index: 100;
box-shadow: 0px 3px 11px -5px #000;
height: 30px;
background-color: red;
}
http://jsfiddle.net/11wkyvat/
I have a dropdown menu in af fixed positioned header, where I want the dropdown box to appear in front of another fixed positoned element.
I have tried with z-index on both elements, and I have checked, that both elements has a position.
See tis fiddle: http://jsfiddle.net/ng8u8zjx/1/
The dropdown box i showing behind the element containing the "+". I want it in the front.
.dashboard-header {
width: 100%;
height: 50px;
position: fixed;
top: 0;
background-color: #FF555F;
}
...
.dashboard-header .user-menu ul ul {
display: none;
background-color: #FF555F;
height: auto;
text-align: center;
z-index: 10;
position: relative;
}
...
/* ADD NEW START */
article.content header a.add-new {
color: #FFF;
line-height: 32px;
text-align: center;
background-color: #FF555F;
border-radius: 5px;
width: 30px;
height: 30px;
display: block;
position: fixed;
right: 10px;
top: 60px;
font-size: 22px;
text-decoration: none;
z-index: 1;
}
You have to set z-index to container .dashboard-header.
.dashboard-header {
z-index: 2;
}
Fiddle: http://jsfiddle.net/ng8u8zjx/2/
I've got a modal style I'm using from http://tympanus.net/codrops/ but I've created a custom close button (.md-close) that I want to be truly fixed in the top right as the user scrolls the content of the modal window.
Code here: http://codepen.io/jeremypbeasley/pen/upzrB
Right now when you scroll, .md-close leaves the visible area, making it hard to close without scrolling up. How can I force this to stay put?
I realize this is something to do with the position property but I've tried every possible combination of the parents and children. Might this have something to do with the transform property I'm using?
Any help?
Full css i used :
or live : http://codepen.io/anon/pen/lynBm
.md-close {
position: fixed;
top: 3vw;
right: 3vw;
height: 50px;
border: 0px;
cursor: pointer;
width: 50px;
background: black;
text-indent: -9999px;
overflow: hidden;
display: block;
background: blue url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/120px-VisualEditor_-_Icon_-_Close.svg.png);
background-size: 100%;
z-index: 99999;
}
.md-trigger {
width: 300px;
height: 300px;
background: blue;
text-indent: -99999px;
margin: 100px auto;
}
.md-modal {
width: 100%;
max-width: 100000000000px;
max-height: 100%;
position: absolute;
top: 0;
left: 0;
transform: none;
backface-visibility: visible;
}
.md-content {
max-height: 100%;
overflow: auto;
padding: 10% !important;
}
.md-show.md-effect-12 ~ .md-overlay {
background-color: black;
}
I solved this problem by adding a max-height of 100vh to .md-content
I've got the following piece of CSS in which i want the navigation and the website to be absolutely positioned so i can slide them back and forth when the menu button i pressed(Like the facebook app for example). To do so i've got a container with an overflow: hidden(To hide the nav bar and slide it in when needed). However; the container loses it's autoheight because of the absolute positioning within i'm afraid.
How can i get the height to be set automatically again as overflow: hidden does without absolute positioning in it.
i've created a fiddle in which the container has a height of 500px. I want to make the height scale automatically though. http://jsfiddle.net/rB7EY/
div {
box-sizing: border-box;
}
.container {
overflow: hidden;
width: 100%;
max-width: 60em;
padding: 0;
margin: 0 auto;
position: relative;
background: grey;
height: 500px;
}
/*CSS for the navigation bar that can be toggled*/
.navigation {
width: 15em;
float: left;
background: blue;
position: absolute;
left: -20px;
}
/*The CSS for the actual content*/
.website {
width: 100%;
float: left;
position: absolute;
left: 0px;
}
.container .website .top_bar {
height: 4em;
background: pink;
padding: 1em;
position: relative;
}
.container .website .top_bar .menu_button {
width: 3.2em;
height: 2.5em;
background: red;
border: 0px;
}
nav.menu {
width: 15em;
position: absolute;
left: 1em;
top: 3em;
background: yellow;
}
If I understand you well, enough you want to scale the container automaticly? Try using a min-height and a max-height
I fixed it by using a div between the container and the navigation and website and gave that a absolute position. With that i've decided to make the container be min-width: 100%