I've created a notice as in the pictures
But some extensions will appear above this notification
this css for notice
display: block;
position:fixed;
for "online" css
display:inline-block;
It could be those other elements also have position:fixed on them. One solution is to use z-index and set it higher than the other element
As you haven't supplied any sample html/css for us to duplicate this issue, I'm going to use some generic HTML:
div:first-of-type {
background: red;
width: 100vw;
height: 100vh;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: blue;
}
.fixed.green {
background: green;
left: 20px;
top: 20px;
}
<div>Some content</div>
<div class="fixed green">Fixed element</div>
<div class="fixed">Another fixed element</div>
As you can see, the green div is under the blue one. This will represent your notification.
By adding z-index:5; to the green div (in this example any value greater than 1 will work) the green div will appear at a higher level than the blue div and become visible:
div:first-of-type {
background: red;
width: 100vw;
height: 100vh;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: blue;
}
.fixed.green {
background: green;
z-index: 5;
left: 20px;
top: 20px;
}
<div>Some content</div>
<div class="fixed green">Fixed element</div>
<div class="fixed">Another fixed element</div>
The maximum value for z-index varies by browser but generally is in the millions. Feel free to set the notification z-index to 9999 or some other super-high value.
Related
This question already has answers here:
css z-index issue with nested elements
(2 answers)
I have position but z index is not working
(1 answer)
Lower z-indexed parent's child upon higher z-indexed element?
(2 answers)
Closed 4 years ago.
I have a problem with positioning, I'd like to put the .sibling-child over .parent without modifying the current z-index. Is there a way to do this in CSS?
Here the jsfiddle with the problem. http://jsfiddle.net/8hb6xgLj/1/
.parent {
width: 300px;
height: 100px;
background: #333;
position: relative;
z-index: 10;
}
.child {
top: 60px;
position: absolute;
width: 50px;
height: 80px;
background: red;
}
.sibling {
width: 300px;
height: 100px;
background: #ccc;
position: relative;
z-index: 9;
}
.sibling-child {
top: 10px;
position: absolute;
width: 70px;
height: 80px;
background: blue;
}
<div class="parent">
<div class="child">
</div>
</div>
<div class="sibling">
<div class="sibling-child">
</div>
</div>
In your example, both div elements are positioned with different z-index, This means they are stacked in the order they appear in the markup, with the first declared element having the highest stacking index.
Therefore, according to that definition, there is no chance that .sibling-child will appear above .parent.
See the W3C specification on stacking context for more information. Note point 9 in particular:
Stacking contexts formed by positioned descendants with z-indices
greater than or equal to 1 in z-index order (smallest first) then tree
order.
This is the only thing I can think of.
transform: translate3d(0, -100px, 20px);
.parent {
width: 300px;
height: 100px;
background: #333;
position: relative;
z-index: 10;
}
.child {
top: 60px;
position: absolute;
width: 50px;
height: 80px;
background: red;
}
.sibling {
width: 300px;
height: 100px;
background: #ccc;
position: relative;
z-index: 9;
}
.sibling-child {
top: 10px;
position: absolute;
width: 70px;
height: 80px;
background: blue;
transform: translate3d(0, -100px, 20px);
}
<div class="parent">
<div class="child">
</div>
</div>
<div class="sibling">
<div class="sibling-child">
</div>
</div>
I have div container, stretched vertically to 'body'.
Inside it I have 2 DIVs on the one level.
The 1st must be stretched to browser's window. But it minimal
height shouldn't be smaller, than the second's height.
The 2nd have 2 fixed heights (changing by JS).
The problem is:
Can I solve this problem WITHOUT using JS, but only with CSS+HTML?
UPDATE:
My HTML code structure - jsFiddle
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
.container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-top: 51px;
}
.div1{
width: 100%;
height: 100%;
position: absolute;
margin-top: -51px;
background: red;
}
.div2{
float: left;
width: 440px;
height: 500px;
margin-top: 44px;
margin-left: 30px;
position: absolute;
background: #cccccc;
}
If you want the first <div> to always be at least as tall as the second <div>, I would start by placing the latter inside the former:
<div class="div1">
<div class="div2"></div>
</div>
I have the following layout: http://jsfiddle.net/yHPTv/2487/
What I need to do is hide the .hidden class to the right edge of the .block class and have it only appear (by sliding in) on hover to the current position you see it in the JSFiddle.
The issue is, the .hidden class is of variable-width, meaning that the content inside it (ABCDEFGHIJKL) can be completely different, sometimes shorter, sometimes longer.
How would I solve this?
Edit: To clarify what I mean by hiding it to the right edge of the .block class, I mean like this, except it wouldn't be shown.
HTML:
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
CSS:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: 0;
}
To solve my own question, I simply removed right: 0 from .block .hidden and put left: 100%.
http://jsfiddle.net/yHPTv/2488
HTML:
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
CSS:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
left: 100%;
}
I am looking for a way to have a fixed width div centered in the display with divs to the left and right that re-size to fill the display. I am currently accomplishing this with a javascript window.resize function. The reason I want the divs to resize instead of just spill off screen is I actually want the images inside those divs to compress and expand. Is there a way I can accomplish this with just css?
Here is an example of my current markup:
HTML
<body>
<div id="wrapper">
<div id="center">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
CSS
body {
margin: 0px;
min-width: 1024px;
font-size: 14px;
line-height: 20px;
}
#wrapper {
position: absolute;
top: 0px;
left: 0px;
height: auto;
min-width: 1024px;
width: 100%;
background: #7c7b79;
overflow: hidden;
}
#center {
position: relative;
width: 1000px;
height: auto;
margin: 0px auto;
}
#left {
position: absolute;
top: 0px;
left: -610px; //I do want slight overlap
width: 630px; //full width of image
height: 100%;
overflow: hidden;
}
#right{
position: absolute;
top: 0px;
right: -610px; //I do want slight overlap
width: 630px; //full width of image
height: 100%;
overflow: hidden;
}
javascript
$(window).resize(function(){
var browser_width = $(window).width();
if(browser_width >1100){ //below this width stop compressing
var width = ((browser_width - 1000)/2)+ 20;
$('.mid_pat2').css({'width': width, 'right': -(width-20), 'min-width': 30});
$('.mid_pat1').css({'width': width, 'left': -(width-20), 'min-width': 30});
}
});
You can do that with table-cell (IE8+), or flex (IE10).
Here's an example with table-cell.
HTML:
<div id="wrapper">
<div id="left">a</div>
<div id="center">a</div>
<div id="right">a</div>
</div>
CSS:
#wrapper {
display: table;
width: 100%;
}
#left, #center, #right
{
display: table-cell;
}
#center {
width: 400px; /*fixed*/
background-color: yellow;
}
#left {
background-color: red;
}
#right {
background-color: blue;
}
If the view port width is smaller then the fixed width, the table will not overflow, but instead the columns will shrink (and the fixed column will try to take as much space as possible)
I have 3 elements, two on the same level, and one child, all having fixed position. I need to set the z-index properties to place the parent on the bottom, the element on the same level in the middle, and the child on top.
I've tried setting a higher z-index for the child, but it's not working.
<div class="red">
<div class="blue"></div>
</div>
<div class="green"></div>
Here is the case http://jsfiddle.net/udENm/21/ (I need red on the bottom, green in the middle and blue on top, still maintaining red and greenon the same level).
My CSS is like this
.red {
position: fixed;
z-index: 2;
}
.green {
position: fixed;
z-index: 2;
}
.blue {
position: fixed;
z-index: 5;
}
Set your positioning to absolute and remove the z-index from the parent div (the red one) entirely. http://jsfiddle.net/calder12/udENm/32/
.foo {
background: red;
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
}
.bar {
background: green;
position: absolute;
left: 100px;
top: 100px;
z-index: 2;
width: 100px;
height: 100px;
}
.child {
background: blue;
position: absolute;
left: 40px;
top: 40px;
z-index: 5;
width: 50px;
height: 50px;
}
The z-index property only has effect within the stacking context of the containing element.
Put another way, given a bunch of block elements within the same parent element, you can control their front to back ordering pretty easily. However, z-index can only control the front to back ordering within this parent element and not within the global context.
So, you can move .blue backwards and forwards within .red all you like. You can also switch .red and .green around in the z-plane all you like too. However, you can't put .green between .red and .blue because they are in different stacking contexts.
EDIT
Stacking context only applies to elements that are in the flow. If you use position:absolute, then you can do this. See Rick Calder's answer
The green blocks z-index needs to be lower than the red ones. I used this CSS instead of the one you posted:
.foo {
background: red;
position: fixed;
left: 50px;
top: 50px;
z-index: 2;
width: 100px;
height: 100px;
}
.bar {
background: green;
position: fixed;
left: 100px;
top: 100px;
z-index: 1;
width: 100px;
height: 100px;
}
.child {
background: blue;
position: absolute;
top:50%;
left:50%;
z-index: 5;
width: 50px;
height: 50px;
}
Works fine, as you can see green is now z-index 1, red is z-index 2 and the blue block has absolute positioning.
Z-index is relative in a way to the parent. Red is already at 2, and blue is only at z-index 5 compared to it's siblings, but not to outside elements like Green.
Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.
Kinda like this?
http://jsfiddle.net/kBv7R/
HTML
<div class="foo">
<div class="child"></div>
<div class="bar"></div>
</div>
CSS
.foo {
background: red;
position: fixed;
left: 50px;
top: 50px;
z-index: 2;
width: 100px;
height: 100px;
}
.bar {
background: green;
position: fixed;
left: 100px;
top: 100px;
z-index: 5;
width: 100px;
height: 100px;
}
.child {
background: blue;
position: fixed;
left: 90px;
top: 90px;
z-index: 6;
width: 50px;
height: 50px;
}