I'm trying to create a setup where I have a navbar, a collapsible menu within the navbar, and website content.
Sorry for the bad example but kind of like this: https://jsfiddle.net/2nqchLpf/
As you can see if you hover over the sub-menu links when the dropdown is not expanded, you can still click on them.
How can I get the links to display behind the content while having the navbar display over everything?
I have applied z-index like this:
.navbar {
position: fixed;
z-index: 1000;
}
.big-dropdown {
position: absolute;
z-index: -1;
}
#content {
position: relative;
z-index: 999;
}
It's tricky with z-index, considering stacking order and other z-index characteristics. Here's a complete run-down: Basics of the CSS z-index property
But for a simple and easy solution, since you're already using position: absolute, just move the sub-links off the screen.
So instead of this:
.big-dropdown {
opacity: 0;
height: 200px;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
margin-top: 4em;
width: 100%;
}
.show {
opacity: 1!important;
}
Try something like this:
.big-dropdown {
opacity: 0;
height: 200px;
background-color: #fff;
position: absolute;
left: -9999px; /* adjustment */
top: 0;
margin-top: 4em;
width: 100%;
}
.show {
opacity: 1!important;
left: 0; /* new */
}
revised fiddle
This may not be exactly what you are looking for, but if you replace
.show {
opacity: 1!important;
}
with
.show {
display: block;
}
and used
display: none;
instead of
opacity: 0;
it would work
Related
Trying to have my back and next buttons have an animated 'background' created by a :before element when hovered over. The back and next buttons are located at the sides of the page and are the text of the posts so I don't have full control over their content. I want the background block to stretch from one side to the other (right to left on next, left to right on previous) behind the text.
I want the background block (:before element) to be the full height and width of the text it is behind (text has padding)
css (I left out the transition: css until I can get it working properly.)
#nav-BN {
position: relative;
display: block;
padding: 0;
margin: 50px 0;
}
.nav-previous, .nav-next {
display: block;
position: absolute;
z-index: 1;
}
.nav-previous { left: 0; }
.nav-next { right: 0; }
.nav-previous a, .nav-next a {
display: block;
position: relative;
z-index: 2;
text-align: center;
color: #333;
padding: 10px 20px;
}
.nav-previous a:before, .nav-next a:before {
display: inline-block;
position: absolute;
content: '';
left: 0; top: 0;
height: 100%; width: 0%;
background-color: #000;
}
.nav-previous a:hover:before, .nav-next a:hover:before { width: 100%; }
.nav-previous:before { transform-origin: left center; }
.nav-next:before { transform-origin: right center; }
<div id="nav-BN">
<div class="nav-previous">
<a>link</a>
</div>
<div class="nav-next">
<a>link</a>
</div>
</div>
Issues I've encountered is using 100% width, makes it full width of screen not of the containing div. text jumping around page when hovered, etc
I have used this before and I think it is exactly what you are looking for:
http://ianlunn.github.io/Hover/
Use the example hvr-shutter-out-horizontal :
<a class="hvr-shutter-out-horizontal" href="#">Shutter Out Horizontal</a>
but change the css for .hvr-shutter-out-horizontal to background: transparent;
https://cssanimation.rocks/pseudo-elements/
Hope this helps. Not sure exactly what you are trying to do-
I think you should try
flex box
I have this site (NSFW):
link
When the user clicks on a product, should lead to the product page. Unfortunately it does not work... and the problem is because of this code.
.products-grid li.item:hover:before{
content: '';
position: absolute; top: 0; left: 0;
width: 100%;
height: 80%;
z-index: 10; //If we delete this code, the link works
background: url("http://www.altradona.ro/media/wysiwyg/OVERLAY.png");
}
.products-grid li.item .product-info{
position: relative;
}
.products-grid li:nth-of-type(-n+4):hover:before
{
height: 83.4% !Important;
}
.item:hover .product-name{
display : none;
}
.item:hover .price-box{
display : none;
}
If you delete the marked code, the link works but overlay effect disappears.
How can I make both things work? both link and overlay effect.
Can you tell me please how should I modify this code?
Try this:
.products-grid li.item .product-image,
.products-grid li.item .product-image > img {
display: block;
position: relative;
}
.products-grid li.item .product-image:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2 background: url("http://www.altradona.ro/media/wysiwyg/OVERLAY.png");
}
and remove the styles for
.products-grid li.item:hover:before
.products-grid li.item .product-info
z-index: 10; //If we delete this code, the link works
The z-index property specifies the stack order of an element
If if you increase the z-index of product link more than 10 then link will work.
Try this for Product link Z-index:
z-index:12;
Im having some trouble getting an image back to the front.
So basically this is my code segment:
<itemimg>
<img src="images/table1.jpg" />
<img src="images/table1-side.jpg">
</itemimg>
The second a href which links table1-side.jpg is overlapping thetable1.jpgbut i want it the other way around.table1.jpg` should be on top.
The css that affects this part is here:
itemimg {
display: block;
width: 200px;
height: 200px;
}
itemimg img:nth-child(1) {
z-index: 9999;
}
itemimg img:nth-child(2) {
z-index: 0;
}
itemimg img {
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 200px;
height: 200px;
}
itemimg a {
display: block;
position: absolute;
cursor: zoom-in;
}
I tried (as you can see), to send the second image to the back with z-index but it isnt doing it. I even tried messing with the position property on the itemimg img to see if it will re-arrange them. I even switched them around in the HTML so one is on top and it does work BUT i am using Lightbox and when i arrange the HTML to where the table1.jpg is on top, the navigation in Lightbox is backwards (as in i have to press the left arrow to go backwards instead of forwards to see the images). <- i know this might be confusing but take a look at it for yourself here. Click on the table to bring up Lightbox and you have to navigate backwards in the slideshow NOT forwards, which is what i dont want. So i figured if i can get the table1.jpg
on top, it will go forwards as i want it to and thats what im having trouble with.
Really need help here, Thanks in advance!
SOLUTION:
For people who wanted to know the solution. Depending on your scenario the below answers work great. I, however wanted to avoid using inline css and classes so i implemented my images into an ul and set the 2nd li's z-index to -1 as such:
HTML
<itemimg>
<ul>
<li><img src="images/table1.jpg" /></li>
<li><img src="images/table1-side.jpg" /></li>
</ul>
</itemimg>
CSS
itemimg {
display: block;
width: 200px;
height: 200px;
}
itemimg ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
itemimg li {
width: 200px;
height: 200px;
position: absolute;
}
itemimg ul li:nth-child(2) {
z-index: -1;
}
itemimg img {
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 200px;
height: 200px;
}
itemimg a {
display: block;
position: inherit;
cursor: zoom-in;
}
My website is updated with the end result so go and take a look!
The problem lies on the 2nd z-index. Make it -1 like this:
itemimg {
display: block;
width: 200px;
height: 200px;
}
itemimg img:nth-child(1) {
z-index: 9999;
}
itemimg img:nth-child(2) {
z-index: -1; //make this -1
}
itemimg img {
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 200px;
height: 200px;
}
itemimg a {
display: block;
position: absolute;
cursor: zoom-in;
}
The z-index for both images is 9999.
Solution 1:
Hard code one of them in the HTML.
<itemimg>
<img src="images/table1.jpg" style="z-index:10000"/>
<img src="images/table1-side.jpg">
Solution 2:
Give the front image a id and name it something like "frontImage" then add
.frontImage {
z-index:10000;
}
Im trying to make a popup box that causes the surrounding area to get greyed out. My issue is that the opacity of the shadow div seems to overide that of the popup. I tried changing one from absolute to fixed position and increasing the z index of the popup but neither worked.
Here is a screensot of the problem.
And below is the relevent code (ask if you need to see more)
.textPopup
{
width: 1400px;
height: 600px;
background-color: White;
position: fixed;
margin-left: auto;
margin-right: auto;
z-index: 15;
left: 0;
right: 0;
top: 50px;
bottom: 0;
opacity: 0.2;
}
#innerPopup
{
background-color: White;
width: 1350px;
height: 550px;
position: absolute;
margin-left: auto;
margin-right: auto;
z-index: 15;
left: 0;
right: 0;
top: 50px;
bottom: 0;
opacity: 1;
}
... snip
<div id="popupShadow">
</div>
<div class="textPopup">
<div id="innerPopup">
</div>
</div>
</body>
</html>
The issue you have is that #innerPopup is inside #textPopup. The opacity is then inherited by the child and cannot be overridden with it's own property.
If it is not possible to separate them, then consider using an rgba value for the background as opposed to the opacity property:
#textPopup {
background-color: rgba(255,255,255,0.2);
}
You can see it working on jsfiddle.
You'll be able to make it work as expected by making the following changes in your CSS:
#innerPopup
{
position: relative; /* change this to relative - will allow you to override the parent specified opacity */
opacity: 1;
/* other properties */
}
I try to make web site with minimal HTML markup for presentation.
Having the following HTML tag:
<div class="title">I'm a title!</div>
I need to add two elements before it using CSS, 1 for background and 1 for shadow.
Something like:
.title
{
display: block;
position: relative;
}
.title:before
{
display: block;
background-color: #00FFFF;
position: absolute;
width: 100%;
height: 100%;
margin: 0 0 0 0;
left: 0;
top: 0;
content: '';
z-index: -1;
opacity: 0.5;
}
.title:before
{
display :block;
background-color: #111111;
position: absolute;
width: 100%;
height: 100%;
margin: 5px -5px -5px 5px;
left: 0;
top: 0;
content: '';
z-index: -1;
opacity: 0.5;
}
doesn't work because the second .title:before overrides the first.
I cant add the background to the element because I need it to have opacity.
Is there any way to do this without adding additional markup? And if the answer is somehow not using two :before elements is there any way to specify more then one?
Not sure how you'd apply n elements, but for only two (and especially here) it seems to me you could just use :after for the second element...
I am not sure. Have you tried something like .title:before:before? Maybe this helps... Not able to test it right now.
why don't use backgroungd gradient image instead
you call then Something like
background : url("../images/image_path.png") 0 0 no-repeat;
I dont understand why you cant just use...
.title
{
display: block;
position: relative;
background-color: #00FFFF;
}
.title:before
{
display :block;
background-color: #111111;
position: absolute;
width: 100%;
height: 100%;
margin: 5px -5px -5px 5px;
left: 0;
top: 0;
content: '';
z-index: -1;
opacity: 0.5;
}
Two befores will be only in future. No one browser supports it now.
Here specification: http://www.w3.org/TR/2003/WD-css3-content-20030514/#nesting
And second before will be working like div::before::before or div::before(2)