I'm having a hard time getting right stacking order. Is there a physical way to render this right (.above-mask being, well, above mask, while .below-mask stays below) without changing html?
EDIT: Removing z-index on .below-mask is, unfortunately, also impossible.
HTML:
<div class="mask"></div>
<div class="below-mask">
<div class="above-mask"></div>
</div>
CSS:
.mask{
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: rgba(0,0,0,0.3);
z-index: 10;
}
.below-mask{
position: absolute;
width: 15em;
height: 15em;
background: blue;
z-index: 1;
}
.above-mask{
position: absolute;
width: 10em; height: 10em;
top: 2.5em; left: 2.5em;
background: yellow;
z-index: 100;
}
codepen: http://codepen.io/anon/pen/WrXbaL
EDIT: How it looks now - I'm making a first-steps view. I wanted elements that need to be explained to be above the mask (here it would be the search panel), while everything else stays neatly hidden below.
Okay, I'm stupid. I don't need a mask, I can just use eiter a huge box shadow or an outline:
outline: 1000em solid rgba(0,0,0,0.3);
It does the trick.
http://codepen.io/anon/pen/eJeNVg
Related
I have 3d canvas with z-index : -1
I want to display components on z-index: 0 and be able to click 3d canvas without any problems. Unfortunately when I add component A to z-index: 0 margin of this component is spread horizontally and I'm unable to click 3d canvas one the left and right side of component A.
.background-3d-canvas {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
background-color: silver;
}
.front-component {
background-color: blue;border-radius: 10px;
padding: 20px;
margin: auto;
width: 300px;
background-color: blue;
}
<div class="background-3d-canvas">
Test<br/>
Test2<br/>
Test3<br/>
Test4<br/>
Test5<br/>
Test6<br/>
</div>
<div class="front-component">
Editor
</div>
I created jsfiddle to demonstrate this problem. Not all links are clickable.
https://jsfiddle.net/ec5uuthy/
You can add those attributes to .front-component:
pointer-events: none;
position: absolute;
left: 0;
right: 0;
https://jsfiddle.net/76bpqge1/
I think this question is related to Link not working inside floated div but I still can't figure it out.
I have a div as follows:
.fullwidthimage {
width: 100%;
position: relative;
z-index: -1;
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 1;
top: 15px;
width: 100%;
}
#homepagebutton {
position: absolute;
text-align: center;
z-index: 100;
bottom: 50px;
width: 200px;
height: 60px;
left: 50%;
margin-left: -100px;
font-size: 25px;
border: 1px solid black;
border-radius: 5px;
background-color: orange;
color: black;
text-decoration: none;
}
<div class="fullwidthimage">
<img class="noround imageundertext smallimg" src="http://placehold.it/600x800">
<img class="noround imageundertext midimg" src="http://placehold.it/1000x1000">
<img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300">
<img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500">
<h1 class="imageoverlay">Title Here</h1>
Get Started
</div>
The different images are using a CSS media query to display/hide at different sizes. The whole thing is a full width image with a text title and 'button' (that's actually just a link styled to look like a button) over the top of the image.
Whatever links I put inside that div won't work - the text shows on the page, but nothing happens if you mouse over.
Why?!
Links placed immediately outside of the div on the same page work just fine, so I don't think it's anything to do with other containing divs there.
I'm assuming from that previous question asked that it's something to do with the positioning, but I can't make it work.
Thanks!
If you give a -1 in z-index, it goes behind body. So the whole div.fullwidthimage becomes unclickable or unaccessible. So, give z-index: 1 as the starting point.
.fullwidthimage {
width: 100%;
position: relative;
z-index: 1; /* Change this! */
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 2; /* Increase this! */
top: 15px;
width: 100%;
}
I am trying to create a relative-positioned element with overflow:hidden that contains a few fixed-position elements. The goal is to have the fixed child elements become hidden as the parent element moves, sort of like if they were part of a background-image with attachment:fixed on the parent element.
By all accounts on StackOverflow and elsewhere on the web, this is not possible, because a fixed element only regards the browser window and ignores its parent element. However, for whatever reason it actually works as intended in Chrome only: http://jsfiddle.net/x6avvhuf/
Here's what the fiddle looks like, view it in Chrome vs. IE/Firefox to see the difference:
HTML
<body>
<div id = "headwrapper">
I am the relative parent element
<div class = "fixedchild">
I am a fixed child element
</div>
</div>
<div id = "content">
This is the main content portion of the page<br>
<!-- Repeat until the page scrolls -->
This is the main content portion of the page<br>
</div>
CSS
body {
background-color: yellow;
}
#headwrapper {
position: relative;
height: 300px;
width: 100%;
overflow: hidden;
z-index: -1;
background-color: black;
color: white;
text-align: center;
}
.fixedchild {
position: fixed;
width: 75%;
height: 40px;
z-index: 48;
top: 22.5%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
What is an alternative solution for this? I have read that it is possible to make an absolute element behave like a fixed element with CSS, but I have been unable to make this work so far. Thanks in advance for any help or advice! :)
UPDATE
Sometimes the best solutions are the most simple. Given the code you posted all you would have to do is set a background-color on #content (ex: yellow in this instance to match the body) since your fixed element has z-index: -1 and will sit behind it anyways:
#content{
background: yellow;
width: 100%;
}
CSS EXAMPLE 1
OR
You could set #content to position:relative which would allow you to order this and your fixed div with z-index (this is probably better, using z-index: -1 is kind of a hack):
CSS
.fixedchild {
position: fixed;
width: 75%;
height: 40px;
z-index: 1; //set to 1
top: 22.5%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
#content{
background: yellow;
width: 100%;
position: relative; //add
z-index: 2; //set higher
}
CSS EXAMPLE 2
(previous answer):
DISCLAMIER: This is not a CSS solution.
There may be a CSS solution for this. I don't happen to know one off the top of my head, but I do know this can be done pretty easily with Jquery
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop()+100; //offset starting position which I hard coded to top: 100px - you can change as needed
$(".fixedchild").css({"top": scrolled+"px"});
});
CSS
.fixedchild {
position: absolute;
width: 75%;
height: 40px;
z-index: 48;
top: 100px;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
JS EXAMPLE
My Fiddle
http://jsfiddle.net/yjw46/2/
My Goal
I have this beautiful wheel of colors as a PNG. (I also have it as an SVG). When one of the colors is clicked, I want the WHOLE circle to change to that color. For example, if red is clicked, I want the whole wheel to turn red instead of colorful.
How I Intended to do it
I wanted to have a transparent (in the Fiddle it's semi-transparent, for debugging purposes) div in the shape of a circle (using border-radius) that will be DIRECTLY ON my color-wheel-image. When a color is pressed, I planned for the div to stop being tranparent, and (in a beautiful transition) turn to that color, making it look like the whole wheel has changed color.
Problem
I cannot get the div to cover the image.
So
I'd be glad to hear either why my technique didn't work, or a better technique, if you have one.
You was very close, simply chanage position: relative; to position: absolute; (on the div you want to have over the image) to fix the problem.
Now remember we need to have the parent as position: relative; or the absolute positioned div will not sit in the parent. You have already set this so its good to go.
Find more on position: absolute; here.
Demo here
#circleCover {
width: 300px;
height: 300px;
position: absolute;
top: 0px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here is a little demo to show what will happen without the relative position being set on the parent with the child having absolute.
Demo Without Relative
So you can see that the child is not staying within the parent.
And here is the parent with relative position.
Demo With Relative
As here the child does stay within the parent. This should help you understand why that is needed for the task you are trying to accomplish. Any questions please do just leave a comment and I will get back to you.
<div id="circleWrap">
<img src="http://y.emuze.co/circle.png" id="colorCircle"/>
<div id="circleCover" >
</div>
</div>
I have kept Your div one above the other
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
top:0px;
}
#circleWrap {
position: relative;
top: 0px;
width: 300px;
height: 300px;
margin: 0 auto;
}
#circleCover {
width: 300px;
height: 300px;
position: relative;
top: -302px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here it is in action: http://jsfiddle.net/yjw46/7/
Change your CSS slightly.
#circleCover {
top:-304px;
}
Fiddle
Just add position:absolute in #colorCircle
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
position:absolute;
}
I'm trying to make a background image be outside a div and can't figure out how to do this (if even it's possible). My HTML:
<div id="test"></div>
My CSS:
#test {
width: 50px;
height:50px;
background: 0 50px url('https://developers.google.com/_static/images/developers-logo.svg') blue;
}
A stand-alone demo:
http://jsfiddle.net/568Zy/
The demo shows the image within the 50x50 div. What I was hoping for was to have the background image start at 0px from the top and 50px from the left.
Any ideas?
Your question does not make it clear exactly what you want the end result to look like.
It is not possible to make a background image 'overflow' it's element, however you can apply the background image to a pseudo element and make that whatever size you want and position it wherever you want.
I have used this technique on your example: http://jsfiddle.net/ybw750jd/
#test {
background: blue;
height:50px;
position: relative;
width: 50px;
}
#test:before {
background: url("https://picsum.photos/450/100") repeat scroll 0 0 transparent;
content: " ";
display: block;
height: 100px;
position: absolute;
width: 450px;
z-index: -1;
}
If this is not the effect you want, please rephrase your question and consider making a mock up image showing what you want it to look like.
Try this: http://jsfiddle.net/568Zy/16/. Essentially, you're creating two <div> elements, and set one to be absolute with a z-index: 0; on one and z-index: 1; on the other.
<div id="test">zzz</div>
<div class="z-index"></div>
#test {
background: blue;
width: 50px;
height:50px;
position: relative;
z-index: 1;
}
.z-index {
position: absolute;
background: url('https://developers.google.com/_static/images/developers-logo.svg');
z-index: 0;
width: 300px;
height: 100px;
top: 0px;
left: 50px;
}