I write css coded is the following lines. but not working z-index.
I want to know how I can make the z-index work while keeping the value of position as relative.
#foo {
position: relative;
z-index: -1;
width: 100%;
height: 30%;
background-color: lightblue;
}
#bar {
width: 50%;
height: 30%;
background-color: lightpink;
}
As far as I know, if you set the value of position to a non-static value, the z-index should work. Are there any other factors that affect the z-index?
Also if I change the value of position to absolute it works fine.
When position is relative
When position is absolute
everything is working as you need you can see I have added margin-bottom:-20px; to .foo so that you can se that in effect that .foo is behind .bar.
Understand that position won't take item out of flow, which will keep it at it's position. To see this in effect there must be some overlapping between two elements, than you can see the z-index in efffect.
html,
body {
width: 100%;
height: 100%;
}
#foo {
position: relative;
z-index: -1;
width: 100%;
height: 30%;
background-color: lightblue;
margin-bottom: -20px;
}
#bar {
width: 50%;
height: 30%;
background-color: lightpink;
}
<div id="foo">Foo</div>
<div id="bar">Bar</div>
Related
The wrapper displays on the top of the first parent element. Good!
The problem:
However the second parent element is on the top of the wrapper element, and I can't figure it out why. It needed behind the child element like the first parent. (In real life it's a modal, but I tried to simplify the problem.)
The parent element is sticky (and I can't change it.)
The wrapper element must be an absolute position element.
I've tried to change z-indexes, add extra wrappers, asked openAI, with no luck.
Basically it looks like this (scss):
.parent {
width: 100px;
height: 100px;
background-color: blue;
z-index: -1;
position: sticky; // <-must be sticky
.wrap {
position: absolute; // <-must be absolute
top: -5px;
left: -5px;
z-index: 1;
width: 50px;
height: 210px;
background-color: red;
}
}
And the HTML:
<div class="parent">
<div class="wrap"></div>
</div>
<div class="parent"></div>
To see in live the simplified problem: https://codesandbox.io/s/sticky-parent-sp3v3b?file=/src/styles.scss
The second blue box need to be behind the red as well.
Any advice would be nice.
Okay so the solution was it needed to add different indexes to the parent element like this:
.parent {
width: 100px;
height: 50px;
background-color: blue;
position: sticky;
border: 1px solid white; // <-must be sticky
&:first-of-type {
z-index: 1;
}
&:last-of-type {
z-index: -1;
}
I have 3 divs on top of each other having following css.
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: absolute;
left: 83px;
}
and the divs that have classes are as follows:
<div class="d1">
<div class="d2">
<div class="d3">text</div>
</div>
</div>
and as a result I see content of d3 cut off because of overflow:hidden in d1.
How can I avoid cut off content of d3 without modifying d1?
Getting around the overflow..
An element can overflow from a relative or absolute positioned parent by setting its position to fixed. An element that has position: fixed will have the default left,right,top, and bottom styles set as auto. This will position .d3 to the top-left of .d2, and then the left: 83px style will push it to the left from there.
Making up the additional space..
However, to get that additional movement to the right as the original markup, you will need to add margin-left: 8px, which will make-up the additional ~8px needed to replicate the original. Further adjustments to the position of .d3 will need to be done by setting the margin style (see below).
Your updated code should look like this..
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: fixed;
margin-left: 8px;
left: 83px;
}
Some considerations and caveats..
As a previous commenter mentioned, best practice would be to fix your html markup because this solution could cause issues if you ever need to move the position of .d3. For example, setting left,right,top, or bottom will cause the default setting of this style, auto, from being unset, and the element will be positioned relative to the viewport rather than the parent relative or absolute element.
I have this CSS defined with my page:
.content {
background-image: url("img/bg.jpg");
width: 100%;
}
.exhibit {
width: 100%;
height: 100%;
text-align: center;
}
.yt-embed {
width: 560px;
height: 315px;
position: relative;
top: 50%;
}
The DIV with .yt-embed is inside one with .exhibit, and the DIV with .exhibit is inside one with .content.
My issue is that the "top" property in my .yt-embed class is having absolutely no effect. However, it does work when it is set to a pixel value, instead of a percentage.
Percentage values are relative-to-parent.
So, for any dimension of a given element, if you want to use a percentage value, the rendering engine must already know an explicit value for the corresponding dimension of the element's parent.
The one exception is the <html> element, which can accept a percentage value because the rendering engine will regard that value as relative-to-viewport instead of relative-to-parent.
Consequently, to enable your
.yt-embed {
top: 50%;
}
declaration to work, you'll need to declare:
html, body, div {
height: 100%;
}
at the start of your CSS.
My issue is that the "top" property in my .yt-embed class is having absolutely no effect.
Your problem is that your outter elements don't have a specific height. They are being expaded by the inner element .yt-embed that has the height declaration.
Using percentage based values is widely used and works fine. Here's a quick example:
* {
box-sizing: border-box;
}
.wrapper {
display: inline-block;
width: 300px;
height: 300px;
position: relative;
background: #f00;
padding: 10px;
}
.full.sized {
width: 100%;
height: 100%;
background: #0f0;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
background: #00f;
color: #fff;
padding: 10px;
}
<div class="wrapper">
<div class="full sized">
<div class="inner">inner</div>
</div>
</div>
You can use the percents by changing the position to absolute
.yt-embed {
width: 560px;
height: 315px;
position: absolute;
top: 50%;
}
The parent element (in this case .exhibit) needs to have a pixel value on the height property, so that the browser can determine where exactly its position is.
You can read about top here: http://www.w3schools.com/cssref/pr_pos_top.asp
The same applies when applying a percentage value to the height of an element within another element; if the child has a percentage value then the parent must have a pixel value to have any effect.
Edit
Example:
.exhibit {
height: 315px;
*or*
min-height: 315px;
}
or create another div inside .exhibit, containing .yt-embed, with these values if necessary.
.yt-embed {
top: 50%;
position: absolute/relative;
width: 560px;
}
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
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}