Develop Reference

Why z-index has no effect? [duplicate]

This question already has answers here:
Why does z-index not work?
(10 answers)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
I need text be above the image, so I set z-indexto 10, and image to 5.
Text is in Navbar.
function ProductList2(props: OrganizationList2) {
return (
<div>
<div className={styles.container1}>
<Navbar />
<img
src="/Olovka_Studio_gyűrű_v2.png"
width="100"
height="140"
className={styles.img1}
/>
.container1 {
background-color: #12341b;
position: relative;
height: 38vw; /*543/1440*/
}
.img1 {
position: absolute;
right: 11vw; /*159/1440*/
top: 0px;
z-index: 5;
height: 38vw;
width: 24vw; /*372/1440*/
}
.container { /* <------------------ Inside Navbar*/
display: flex;
margin-left: 8vw; /*128/1440*/
margin-right: 8vw; /*430/1440*/
justify-content: space-between;
max-height: 88px;
z-index: 10;
}

An element with z-index doesn't work without a position element
Try:
.div-with-z-index {
position: relative /* Relative doesn't change the position of the element itself. */
}

CSS: How can I make a percentage bar in the background of a td in a table [duplicate]

This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 1 year ago.
I am trying to make an order book widget. I am imitating this example on codesandbox where it has a span in td with position: relative and a percent div with its 'positionset toabsolute` and then it dynamically setting the width accordingly.
the code is like this
td span {
position: relative;
z-index: 2;
}
table.Asks .percent {
background-color: #fae9f1;
z-index: 0;
}
table.Bids .percent {
background-color: #f1f9e8;
}
td .percent {
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
So I was trying to do the same. Here is a live demo of what I did. The problem is it seems that all of the bars appear vertically instead of horizontally. I cannot figure out what went wrong there.

Your td is missing position: relative; so the absolute positioned element is not positioned relative to it
table .price {
position: relative;
color: red;
}
sandbox: https://codesandbox.io/s/recursing-keldysh-wj3jd?file=/src/styles.css

Draw Line in the middle of the line [duplicate]

This question already has answers here:
Add centered text to the middle of a horizontal rule [duplicate]
(33 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 2 years ago.
I was wondering how can I implement this image with CSS(3) (and if necessary with javascript).
Any ideas?

There are numerous ways of doing this- but since your lines are more than 1 pixel in height and has rounded ends on both ends of both lines - I would di it as ::before and ::after pseudo-elements with the centered text.
Note that when positioning elements with position:absolute - you will need to apply position: relative to a parent element. Aslo - you will need to offset the line pseudoelements by half their height - in order to vertically center them.
.wrapper {
text-align: center;
position: relative;
}
span {
display: inline-block;
width: 10%;
font-size: 20px;
font-weight: bold
}
.wrapper::before,
.wrapper::after {
content: ' ';
display: block;
position: absolute;
top: calc(50% - 3px);
width: 45%;
background: black;
border-radius: 6px;
height: 6px;
}
.wrapper::after {
right: 0;
}
<div class="wrapper">
<span>Hi!</span>
</div>

How to set css position 'top' relative to document height instead of viewport height? [duplicate]

This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 3 years ago.
I will try to make my question more clear.
Because I used below setting on Html body, I need to scroll the page down to get to page bottom.
body { height: 180vh;}
And I want to set a div position top property relative to document height, so that I can control its position at a place only visible when I scroll down. I prefer to set it by percentage value so that code will adapt different sizes of devices.
But by default the top property is relative to viewport, so I can not realize it by setting top value.
Is there a way to realize what I want to do? even not by top property.

If you give the body a position: relative and the div a position: absolute, you can set the top property as a percentage, where top: 100% will position it at the bottom of the page:
body {
height: 180vh;
background: lightblue;
position: relative;
}
div{
height: 30px;
width: 140px;
border: solid 2px gray;
background: white;
position: absolute;
top: 100%;
}
<div></div>

If i understand your question correctly, there are 2 ways
use padding-top
use position:absolute and top
code snippet below:
body {
height: 180vh;
}
.myDiv1 {
margin-top: 110vh;
height: 100px;
width: 100%;
background: lightblue;
}
.myDiv2 {
position: absolute;
top: 150vh;
height: 100px;
width: 98%;
background: lightpink;
}
<body>
<div class='myDiv1'></div>
<div class='myDiv2'></div>
</body>

First you need to make sure that the position property of the body is relative, absolute or fixed.
You can then set the position: absolute to make the element be dependent on the last parent element that had one of three properties mentioned above.
Finally you can set your top, left, right and bottom properties after that.
body {
height: 180vh;
position: relative;
}
#down {
position: absolute;
// or bottom: 10%;
bottom: 25px;
}
<div id="down">Here</div>

Make div that fill all height of page left from another div only with CSS [duplicate]

This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I'm trying to make page with normal div #header and scrollable div #content, so my #content fill all the height left from the #header, even if #header changes his own height.
I tried several options and that is this is my last one http://jsfiddle.net/C4wEg/. But the flaw of this option is that I need to change top property of #content (utilize JavaScript) if height of the #header changes.
Is there any solution to achive my goals only with css?
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
position: relative;
}
#header {
background-color: tan;
}
#content {
overflow: auto;
background-color: teal;
position: absolute;
bottom: 0;
top: 20px;
}
<div id="header">
Test header
</div>
<div id="content">
Test content
</div>

Since css ignores the dimensions of absolute/fixed objects (those are out-of-flow as far as their neighbours are concerned), you can use media queries to emulate dynamic height behaviour:
#media only screen and ( max-width: 700px ) {
#header {
height: 40px;
}
#content {
padding-top: 40px;
}
}
http://jsfiddle.net/2RTFW/ (resize the width of display area to see the effect).
If you are using SASS, then you can easily generate such media queries, even in 10px increments, if you wish (use "for" loop).