I have a div, .top-level-object, that overflows both of its containers, .tl-object-container and .header. My goal is to have .top-level-object visible and in front of all other elements in this scenario. I've tried z-indexing, but I couldn't get it to work. The image, for some reason is the only thing with this kind of behavior, because if you remove it, you will clearly see that the example works.
Side Note: I can't set position:absolute; on .top-level-object because other objects on the page depend on the space that it takes up for formatting.
What could I be missing?
.header {
height: 100px;
width: 100%;
overflow: visible;
background-color: rgba(127, 127, 127, 0.3);
}
.tl-object-container {
width: 400px;
height: 1px;
float: right;
overflow: visible;
background-color: rgba(127, 127, 127, 0.3);
}
.top-level-object {
height: 1000px;
width: 100%;
background-color: rgba(127, 127, 127, 0.3);
}
.object-covering-tl-object {
width: 100%;
background-color: blue;
}
.object-covering-tl-object img {
width: 100%;
height: auto;
display: block;
}
.object-not-being-covered-by-tl-object {
height: 100px;
width: 100%;
background-color: rgba(127, 127, 127, 0.3);
}
<div class="header">
<div class="tl-object-container">
<div class="top-level-object">
</div>
</div>
</div>
<div class="object-covering-tl-object">
<img src="http://www.jssor.com/img/home/01.jpg" alt="Random Image" />
</div>
<div class="object-not-being-covered-by-tl-object">
</div>
By using position: relative; you can then adjust z-index - the difference being that the position is adjusted based upon the position of the element if it were static, as opposed to being "absolute" to a parent element.
Related
Here's the problem
* {
color: white;
}
.must-be-top {
background-color: red;
height: 200px;
width: 200px;
position: absolute;
left: 20px;
top: 20px;
z-index: 1999;
}
.v-space {
height: 10px;
}
.blur {
height: 50px;
width: 400px;
background-color: rgba(0, 0, 0, .8);
backdrop-filter: blur(10px);
}
<div class="blur">
This is the blurred container
<div class="must-be-top">This div must be on top</div>
</div>
<div class="v-space"></div>
<div class="must-be-behind blur">This div must be behind</div>
I'm looking for a workaround to make the red div go over the blurred div. I've already read about stacking order and painting order but couldn't come up with any solution. Any ideas?
UPDATE
I need the red div to be on top of any element regardless of what they are, and I'm not in control of editing them.
Why is blur a parent of must-be-top? Changing that, and applying z-index: -1; to must-be-behind will fix your problem:
* {
color: white;
}
.must-be-top {
background-color: red;
height: 200px;
width: 200px;
position: absolute;
left: 20px;
top: 20px;
}
.v-space {
height: 10px;
}
.blur {
height: 50px;
width: 400px;
background-color: rgba(0, 0, 0, .8);
-webkit-filter: blur(1px);
}
.must-be-behind {
z-index: -1; /* new line */
position: relative; /* new line */
-webkit-filter: blur(1px) /* new line */
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="blur">This is the blurred container</div> <!-- edited line -->
<div class="must-be-top">This div must be on top</div>
<div class="v-space"></div>
<div class="must-be-behind blur">This div must be behind</div>
</body>
</html>
Add this line to your CSS and you will get what you want:
.must-be-behind {z-index:-1; position:relative;}
The reason is without any z-index defined, your .blur div will treat the second one higher than the first one. What I did is set the .must-be-behind always be behind, and to have z-index to work, we need a positioned element.
* {
color: white;
}
.must-be-top {
background-color: red;
height: 200px;
width: 200px;
position: absolute;
left: 20px;
top: 20px;
z-index: 1999;
}
.v-space {
height: 10px;
}
.blur {
height: 50px;
width: 400px;
background-color: rgba(0, 0, 0, .8);
backdrop-filter: blur(10px);
}
.must-be-behind {z-index:-1; position:relative;}
<div class="blur">
This is the blurred container
<div class="must-be-top">This div must be on top</div>
</div>
<div class="v-space"></div>
<div class="must-be-behind blur">This div must be behind</div>
Wasn't quite sure how to word the question succinctly, so I hope the above image helps to illustrate what I'm trying to accomplish.
I'm developing sites using Bootstrap and our designer keeps throwing curveballs at us. At first, the absolute element in the example used to just be a solid color extending to the edge of the viewport--ezpz, just use overflow:hidden somewhere and make the element 9999px wide, no problem. But now we're beginning to use pictures and gradients inside of these suckers, where I will need to know where the edge of the screen is, or otherwise cut off some of the image or only see a portion of the gradient.
I am fully aware that I am able to accomplish this with JS and some simple math, but I would like to know if there are any solutions using styles that can get the job done. I tend to develop sites using a very black and white approach wherever possible and view using JS to handle "styling" as a hack, rather than a solution. It feels like I'm brute forcing something that should have a way to finesse it. So I'm more or less just curious if there is a solution that will make my brain a little happier, rather than "how do I do this plz?"
Here's a fiddle, specifically showing the issue with a gradient. Example 1 with solid black works great. Example 2 with a gradient is too wide and basically just looks red (but would look great on a monitor with 20k pixel width!). I'm wondering if there's maybe some clever use of the vw unit that would solve this?
#example1 {
background-color: #fff;
overflow: hidden;
}
#example1 .container {
width: 300px;
height: 100px;
margin: 0 auto;
background-color: #ddd;
}
#example1 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
#example1 .absoluteElement {
position: absolute;
top: 0;
right: 0;
width: 9999px;
height: 25px;
background-color: #000;
}
#example2 {
background-color: #eee;
overflow: hidden;
}
#example2 .container {
width: 300px;
height: 100px;
margin: 0 auto;
background-color: #ccc;
}
#example2 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
#example2 .absoluteElement {
position: absolute;
top: 0;
right: 0;
width: 9999px;
height: 25px;
background: rgb(255, 0, 0);
background: -moz-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#000000", GradientType=1);
}
<div id="example1">
<div class="container">
<div class="relativeElement">
<div class="absoluteElement">
</div>
</div>
</div>
</div>
<div id="example2">
<div class="container">
<div class="relativeElement">
<div class="absoluteElement">
</div>
</div>
</div>
</div>
Note: If this question stays open for a while with no css solutions or the community seems to all agree that JS is the way, I will select the top voted answer as correct!
If your "rail" has a fixed width, this is as simple as a 3-part calc.
0.5 * viewport width - 0.5 * rail width + parent container width
E.g.
calc(50vw - 150px + 100%);
Since your rail width is fixed at 300px and 100% will refer to the full relative element's width because it is fixed.
#example1 {
background-color: #fff;
overflow: hidden;
}
#example1 .container {
width: 300px;
height: 100px;
margin: 0 auto;
background-color: #ddd;
}
#example1 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
#example1 .absoluteElement {
position: absolute;
top: 0;
right: 0;
width: 9999px;
height: 25px;
background-color: #000;
}
#example2 {
background-color: #eee;
overflow: hidden;
}
#example2 .container {
width: 300px;
height: 100px;
margin: 0 auto;
background-color: #ccc;
}
#example2 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
#example2 .absoluteElement {
position: absolute;
top: 0;
right: 0;
width: calc(50vw - 150px + 100%);
height: 25px;
background: rgb(255, 0, 0);
background: -moz-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#000000", GradientType=1);
}
<div id="example1">
<div class="container">
<div class="relativeElement">
<div class="absoluteElement">
</div>
</div>
</div>
</div>
<div id="example2">
<div class="container">
<div class="relativeElement">
<div class="absoluteElement">
</div>
</div>
</div>
</div>
Because position absolute will snap to the first relatively positioned parents boundary, why not remove the absolutely positioned element from the element2 parent and place a position relative on your body, then set its position left and top relative to the body.
To alleviate having to change the height and top properties that will live inside two different elements, set their lengths to a CSS variable then set each elements properties (the height of the proceeding example2 element, and the top of the absolutely positioned element you wish to bound to the side of left side of the body) to the CSS variables length. I would do this with both absolutely positioned element and then set their top properties to match that of their parents placements. Then you can change your width to a view port length and your gradient will show up nicely.
Alternately the bubbling up effect of the absolute positioning, you could forgo position relative on your body and adjust according to the HTML element with a few minor adjustments to the left and/or top properties of your absolute elements.
:root {
--height: 100px;
}
body {
position: relative;
}
#example1 {
background-color: #fff;
overflow: hidden;
}
#example1 .container {
width: 300px;
height: var(--height);
margin: 0 auto;
background-color: #ddd;
}
#example1 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
.absoluteElement {
position: absolute;
top: 0;
left: 0;
width: 50vw;
height: 25px;
background-color: #000;
}
#example2 {
background-color: #eee;
overflow: hidden;
}
#example2 .container {
width: 300px;
height: var(--height);
margin: 0 auto;
background-color: #ccc;
}
#example2 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
.absoluteElement2 {
position: absolute;
top: var(--height);
left: 0;
right: 0;
width: 50vw;
height: 25px;
background: rgb(255, 0, 0);
background: -moz-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#000000", GradientType=1);
}
<div id="example1">
<div class="container">
<div class="relativeElement">
</div>
</div>
</div>
<div class="absoluteElement">
</div>
<div class="absoluteElement2">
</div>
<div id="example2">
<div class="container">
<div class="relativeElement">
</div>
</div>
</div>
I am trying to make an image have green overlay and a title inside the image itself at the same time while trying to be responsive all at the same time, i have tried everything and i just cant make it work.
.headline-picture{
height: auto;
width: 100%;
background-image:
linear-gradient(
rgba(10, 158, 0, 0.5),
rgba(10, 158, 0, 0.5)
);
}
<div class="article-headline">
<img class="headline-picture" src="example image">
</div>
I think i understand the requirement... Have a look at the below snippet. Is this what you were looking for?
I've put the overlay as a separate element and is position:absolute.
.article-headline {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.headline-picture {
height: auto;
width: 100%;
}
.overlay {
background-color: rgba(0, 128, 0, 0.2);
position: absolute;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
}
h1 {
position: absolute;
}
<div class="article-headline">
<img class="headline-picture" src="https://placekitten.com/640/360">
<div class="overlay"></div>
<h1>Title</h1>
</div>
Here is my Fiddle:
.member-img img {
border-radius: 50%;
width: 60%;
margin: 0 auto;
}
.member-img:hover img {
background-color: rgba(71, 161, 215, 0.5);
}
I don't understand why it doesn't work.
I want to change the background color of image on hover
It would be best to keep the html like it is since it's part of a wordpress project.
.
Update:
Thanks for all the help but none of this solution are what I really need.
Anyway since it's not working to put a hover on the image, will it be possible to create another div that will stay exacly on top of the rounded image and will have a transparent color background?
If you mean the background of the image, which is the div the image is in, then:
.member-img:hover {
background-color: rgba(71, 161, 215, 0.5);
}
would be the answer.
your sample image does not have a transparent background, if you use a transparent image like as google logo, it works as you want on hover:
.member-img img {
border-radius: 50%;
width: 60%;
margin: 0 auto;
/*background-color: red; */ /*just for test */
}
.member-img:hover img {
background-color: rgba(71, 161, 215, 0.5);
}
<div class="member">
<div class="member-img">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt="" >
</div>
</div>
I'm not complete sure about what you exactly want. If you want the background to change color when hovering over it, try this in you css:
img {
border-radius: 50%;
width: 40%;
margin: 0 auto;
display: block;
}
.member-img:hover { background: rgba(71, 161, 215, 0.5);}
Do you want something like this:-
.member-img img {
border-radius: 50%;
width: 60%;
margin: 0 auto;
}
.member-img:hover{
background-color: rgba(71, 161, 215, 0.5);
opacity: 0.3;
}
<div class="member">
<div class="member-img">
<img src="https://dummyimage.com/300" alt="" >
</div>
</div>
or
.member-img img {
border-radius: 50%;
width: 60%;
margin: 0 auto;
}
.member-img:hover{
background-color: rgba(71, 161, 215, 0.5);
}
<div class="member">
<div class="member-img">
<img src="https://dummyimage.com/300" alt="" >
</div>
</div>
You can not change background-color of image but you can make use css filters. Filters make your image some effects like blur,saturated.
You can't do that for img but you can do that:-
.member-img {
border-radius: 50%;
width: 300px;
height: 300px;
display: block;
margin: 0 auto;
background: url('https://dummyimage.com/300') center center no-repeat;
}
.member-img:hover {
background: rgba(71, 161, 215, 0.5);
}
<div class="member">
<div class="member-img">
<!--img src="https://dummyimage.com/300" alt="" -->
</div>
</div>
My solution was to create another div with a transparent background-color on top of that image.
.hover {
border-radius: 50%; /* same rounded shape */
width: 210px; /* with the same with and height */
height: 210px;
display: none; /* we can make it display: block with js */
position: absolute;
top: -210px; /* position it exactly on the top of the image */
right: 0;
bottom: 0;
left: 0;
margin: auto;
color: #fff;
background-color: rgba(71, 161, 215, 0.3);
}
index2.html :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index2.css">
</head>
<body>
<div id='menuFrame'>
</div>
<div id='banner'>
</div>
</body>
</html>
index2.css :
body {
margin: 0px;
padding: 0px;
}
#menuFrame {
content: "";
height: 10%;
width: 100%;
background: rgba(255, 0, 0, 0.4);
position: fixed;
}
#banner {
height: 10%;
width: 100%;
background: rgba(0, 255, 0, 0.4);
}
I want a fixed always-on-top div and an overlapping scrollable div.
The width is set right for both but not the height.
Can't also get why to display empty div it's different :   / content: = ""... but I can live with that.
EDIT : when I change
height: 10%
with
height: 50px
for both div I get what I want... why ?
http://jsfiddle.net/axj3yocz/
ok.. forget from the first answer.
so after I tested your code in jsfiddle, I added a position:fixed, to both of the divs.
and this result "one" div but with mixed color.
you can check on http://jsfiddle.net/
put this on the css textbox:
body {
margin: 0px;
padding: 0px;
}
#menuFrame {
content: "";
height: 10%;
width: 100%;
background: rgba(255, 0, 0, 0.4);
position: fixed;
}
#banner {
height: 10%;
width: 100%;
background: rgba(0, 255, 0, 0.4);
position:fixed;
}
and this on the html area:
<div id='menuFrame'>
</div>
<div id='banner'>
</div>
I'm not sure if this is the result you want.. so check this on jsfiddle
Update:
try this:
body {
margin: 0px;
padding: 0px;
}
#menuFrame {
content: "";
height: 10%;
width: 100%;
background: rgba(255, 0, 0, 0.4);
}
#banner {
height: 10%;
width: 100%;
background: rgba(0, 0, 255, 0.4);
position:fixed;
}
it gives one div with mixed colors (the colors of both divs)