How do I make div3 & div4 above div1 and div2 without using "ID" selector on CSS level?
.container {
margin: 50px;
padding: 20px;
text-align: center;
border: 1px dashed #999966;
}
.position {
height: 120px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 10px;
opacity: 0.8;
border: 1px dashed #999966;
background-color: #ffffcc;
}
.position .position {
margin-top: 60px;
margin-left: 100px;
width: 50%;
}
.relative {
position: relative;
border: 1px dashed #669966;
background-color: #ccffcc;
}
.fixed {
position: fixed;
border: 1px dashed #669966;
background-color: #e3e3ff;
align-items: flex-start;
}
.fixed.target-block {
width: 200px;
height: 300px;
top: 130px;
right: 140px;
z-index: 999;
}
<div class="container">
<p>
DIV: CONTAINER<br>
position: relative;
</p>
<div class="position">
<p>
DIV #1<br>
no position;
</p>
<div class="position relative">
<p>
DIV #3<br>
position: relative;<br>
parent
</p>
<div class="position fixed target-block">
<p>
DIV #4<br>
position: fixed;<br>
child
</p>
</div>
</div>
</div>
<div class="position">
<p>
DIV #2<br>
no position;
</p>
</div>
</div>
If we refer to the specification we can read this:
All positioned, opacity or transform descendants, in tree order that
fall into the following categories:
...
All opacity descendants with opacity less than 1, in tree order,
create a stacking context generated atomically.
And in your case Div #2 will create it's own stacking context like Div #1 and since none of them is positioned with z-index you cannot achieve what you want by simply controling their child elements.
So the only way I see here is to make one of the divs positioned and apply z-index to it or both of them positionned with different z-index. The purpose is to avoid following the tree order like specified above.
.container {
margin: 50px;
padding: 20px;
text-align: center;
border: 1px dashed #999966;
}
.position {
height: 120px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 10px;
opacity: 0.8;
border: 1px dashed #999966;
background-color: #ffffcc;
}
.position .position {
margin-top: 60px;
margin-left: 100px;
width: 50%;
}
.relative {
position: relative;
border: 1px dashed #669966;
background-color: #ccffcc;
}
.fixed {
position: fixed;
border: 1px dashed #669966;
background-color: #e3e3ff;
align-items: flex-start;
}
.fixed.target-block {
width: 200px;
height: 300px;
top: 130px;
right: 140px;
z-index: 999;
}
<div class="container">
<p>
DIV: CONTAINER<br> position: relative;
</p>
<div class="position" style="position:relative;z-index:1;">
<p>
DIV #1<br> no position;
</p>
<div class="position relative">
<p>
DIV #3<br> position: relative;<br> parent
</p>
<div class="position fixed target-block">
<p>
DIV #4<br> position: fixed;<br> child
</p>
</div>
</div>
</div>
<div class="position">
<p>
DIV #2<br> no position;
</p>
</div>
</div>
Some related questions:
Stacking order of elements affected by opacity
What has bigger priority: opacity or z-index in browsers?
Related
I want to recreate the following structure:
With black is div container and inside the container on the left there will be text and on the right i need an image bigger than the container.
I tried to do this by grids but things got funky real quick.
As it seems to be important that the containing div maintains the dimensions (as shown by its border), this snippet adds in the actual image as a background on a pseudo element that is absolutely positioned.
That way the protruding bit of image does not alter the container div dimensions.
Here's a simple snippet using a grid to position the left and right sides. Of course you will want to alter proportions to suit your particular case, add styling to the leftside and so on:
.container {
display: grid;
grid-template-columns: 3fr 2fr;
width: 50vw;
height: auto;
margin-top: 10vh;
border: solid 2px black;
}
.leftside {
padding: 1vw;
}
.rightside {
position: relative;
width: 100%;
height: 100%;
}
.rightside::before {
content: '';
background-color: pink;
background-image: url(https://picsum.photos/id/1015/500/200);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 50%;
height: 140%;
bottom: 0;
left: 25%;
position: absolute;
}
<div class="container">
<div class="leftside">
<h2>Heading</h2>
<div>text1</div>
<div>text2</div>
</div>
<div class="rightside"></div>
</div>
go with the flexbox.
.main-container{
display:flex;
display: flex;
justify-content: space-evenly;
border:1px solid black;
margin:30px;
height:300px;
padding:10px;
}
.image{
width:50vw;
position:relative;
}
img{
width:100%;
height:150%;
width: 100%;
height: 150%;
top: -50%;
position: absolute;
}
.text{
display:flex;
align-items:center;
}
<div class="main-container">
<div class="text">
<p>Somthing Somthing</p>
</div>
<div class="image">
<img src="https://loremflickr.com/640/360" />
</div>
</div>
Here you go:
.background {
padding: 25px;
display: flex;
border: 1px solid black;
height: 150px;
position: relative;
margin-top: 50px;
}
.text {
border: 1px solid green;
width: 50%;
padding: 10px;
}
.img {
text-align: center;
width: 50%;
display: flex;
justify-content: center;
}
.img>div {
border: 1px solid blue;
width: fit-content;
padding: 10px;
height: 200px;
position: absolute;
bottom: 25px;
}
<div class="background">
<div class="text">
<p>
text1
</p>
<p>
text2
</p>
<button>
Click me
</button>
</div>
<div class="img">
<div>
me img
</div>
</div>
</div>
Hope this helps
I want to set an image as the border of my div's
The main rule is: border should be outside the box and not increasing the size of a box. Also note that div's (items) have the same width, but not the same height.
The result i want to see: https://dc579.4shared.com/img/JjmymoBWiq/s23/17d090e2630/result
Border image: https://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1
.container {
display: flex;
justify-content: space-around;
}
.product1 {
width: 200px;
height: 500px;
background-color: blue;
}
.product2 {
width: 200px;
height: 550px;
background-color: green;
}
.product3 {
width: 200px;
height: 520px;
background-color: red;
}
.item {
border: 20px;
border-image: url("https://dc614.4shared.com/img/2uaeGtwfea/s23/17d090b76b0/border-1")
}
<div class="container">
<div class="product1 item">
123
</div>
<div class="product2 item">
123
</div>
<div class="product3 item">
123
</div>
</div>
I think you have to specifiy the color and mode as well:
.item{
border: 20px solid #555;
...
}
Might work might not, I'm not not a web developer but have played with it and this might solve it
Probably, the border-image is not ideal for you in this case.
I created an alternative way to achieve the look you want.
Essentially, I added a <span>NEW</span> element with absolute positioning inside each .item element. If you need to move around the span, modify the top and right css attributes.
.container {
display: flex;
justify-content: space-around;
}
.product1 {
width: 200px;
height: 500px;
background-color: blue;
}
.product2 {
width: 200px;
height: 550px;
background-color: green;
}
.product3 {
width: 200px;
height: 520px;
background-color: red;
}
.item {
border: 10px solid rgb(255, 107, 107);
position: relative;
}
.item span {
position: absolute;
top: -20px;
right: -25px;
background-color: red;
padding: 5px;
border-radius: 5px;
color: white;
z-index: 10;
}
<div class="container">
<div class="product1 item">
<span>NEW</span>
123
</div>
<div class="product2 item">
<span>NEW</span>
123
</div>
<div class="product3 item">
<span>NEW</span>
123
</div>
</div>
I have 6 s inside a parent
The height of the internal divs change dynamically based on the underlying data.
The outer Div has a set height.
What I want is that when one of the internal Divs no longer fit (heightwise) in the parent that it should just move over to a "new column" inside the parent Div
Here is a short snippet with my situation:
#outer {
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
Here is another snippet of how I would want it to appear:
#outer {
float:left;
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
<div id="outer">
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
Can anyone suggest anything?
Thanks
Flex wrapping can easily solve this problem.
[If you're using bootstrap, you don't need to write the css written in '*' selector]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#outer {
display: flex;
flex-wrap: wrap;
width: 200px;
height: 90px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
I want an absolute positioned child element (.tag-preview-container) of a flex item (.image-container) to overlap other elements in the DOM (for instance the header .header). I'm setting the z-index of the absolute positioned element to be 2 (even 1 should work). However, the element doesn't overlap any DOM element outside the flex container(.tags-panel). In fact, it is completely cut off by the container. I am not setting z-index of any other element in the DOM, so the root should be the stacking context.
<div class="panel-container">
<div class="header">
</div>
<div class="tags-panel">
<div class="image-container">
<div class="tag-preview-container">
</div>
</div>
<div class="image-container">
</div>
<div class="image-container">
</div>
<div class="image-container">
</div>
</div>
</div>
This is the scss code and here's the JSFiddle
.panel-container {
width: 400px;
height: 400px;
position: relative;
margin: auto;
.header {
width: 100%;
height: 40px;
background-color: green;
}
.tags-panel {
position: absolute;
background-color: red;
top: 40px;
bottom: 0px;
width: 100%;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
}
.image-container {
flex: 0 0 33%;
box-sizing: border-box;
border: 1px solid black;
margin-top: 5px;
margin-left: 1px;
height: 80px;
background-color: yellow;
position: relative;
.tag-preview-container {
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
z-index: 2;
opacity: 0.5;
}
}
The z-index is affected by the overflow property in .tags-panel, removing overflow-y: auto; will solve the issue. Here is the updated fiddle https://jsfiddle.net/yc5xanax/
overflow-y: auto; will automatically wrap/hide the content outside the .tags-panel container.
I have outer div and inner div. I need to place inner div at the bottom of the outer one.
Outer div is elastic (width: 70% for example). I also need to center inner block.
Simple model of described make-up is shown on the picture below:
Tested and working on Firefox 3, Chrome 1, and IE 6, 7 and 8:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
height: 100px; position: relative;'>
Outer
<div style='background-color: green;
position: absolute; left: 0; width: 100%; bottom: 0;'>
<div style='background-color: magenta; width: 100px;
height: 30px; margin: 0 auto; text-align: center'>
Inner
</div>
</div>
</div>
</body>
</html>
Live version here: http://jsfiddle.net/RichieHindle/CresX/
You need a wrapping div for the bottom one, in order to center it.
<style>
/* making it look like your nice illustration */
#outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
#inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }
/* positioning the boxes correctly */
#outer { position: relative; }
#wrapper { position: absolute; bottom: 3px; width: 100%; }
#inner { margin: 0 auto; }
</style>
<div id="outer">
<div id="wrapper"><div id="inner"></div></div>
</div>
CSS3 Flexbox allows the bottom positioning very easily. Check the Flexbox support table
HTML
<div class="outer">
<div class="inner">
</div>
</div>
CSS
.outer {
display: flex;
justify-content: center; /* Center content inside */
}
.inner {
align-self: flex-end; /* At the bottom of the parent */
}
Output:
.outer {
background: #F2F2CD;
display: flex;
width: 70%;
height: 200px;
border: 2px solid #C2C2C3;
justify-content: center;
}
.inner {
background: #FF0081;
width: 75px;
height: 50px;
border: 2px solid #810000;
align-self: flex-end;
}
<div class="outer">
<div class="inner">
</div>
</div>
Works well on all browsers including ie6.
<style>
#outer{
width: 70%;
background-color: #F2F2CC;
border: 1px solid #C0C0C0;
height: 500px;
position: relative;
text-align: center;
}
#inner{
background-color: #FF0080;
border: 1px solid black;
width: 30px;
height: 20px;
/* Position at the bottom */
position: relative;
top: 95%;
/* Center */
margin: 0 auto;
text-align: left;
}
</style>
<div id="outer">
<div id="inner">
</div>
</div>