I've tried the method showed here, but it aint worked out:
StackOverflow: Display div border on top of another div [duplicate] (my own postage)
I have 2 nested divs, and the above method isn't working for both divs.
Here is the code:
html:
<div className="App">
<div class="box mainClass1" id="1">
<div class="helperClass" />
</div>
<div class="box mainClass2" id="2">
<div class="helperClass" />
</div>
</div>
css:
.box {
width: 100px;
height: 100px;
position: absolute;
}
.mainClass1 {
top: 100px;
left: 100px;
background: teal;
}
.mainClass2 {
top: 150px;
left: 150px;
background: red;
}
.helperClass2 .helperClass {
width: 100%;
height: 100%;
border: 3px solid #4286f4;
box-sizing: border-box;
}
note: helperClass2 should be added to the list of classes of parent (outer) div.
.container {
position: relative;
}
.box1 {
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
box-sizing: border-box;
background: blue;
}
.box1:after {
content: '';
display: block;
width: 95px;
height: 95px;
position: absolute;
border: 3px solid black;
z-index: 3;
}
.box2 {
width: 100px;
height: 100px;
position: absolute;
top: 150px;
left: 150px;
box-sizing: border-box;
background: red;
border: 3px solid black;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Related
Please see this minimum example:
I have a container and a box element, the child element is overflowed both XY axis:
* {
box-sizing: border-box;
}
.container {
position: relative;
border: 1px solid red;
width: 80px;
height: 20px;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 220px;
border: 1px solid green;
}
<div class="container">
<div class="box"></div>
</div>
Now, if I add overflow-x: hidden; to the container, the child gets cut on both axes.
* {
box-sizing: border-box;
}
.container {
position: relative;
border: 1px solid red;
width: 80px;
height: 20px;
overflow-x: hidden;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 220px;
border: 1px solid green;
}
<div class="container">
<div class="box"></div>
</div>
How can I make my child only showed on Y axis?
Use clip-path instead of overflow:
* {
box-sizing: border-box;
}
.container {
position: relative;
border: 1px solid red;
width: 80px;
height: 20px;
clip-path:inset(0 0 -200vmax 0); /* works like margin [top right bottom left] */
}
.box {
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 220px;
border: 1px solid green;
}
<div class="container">
<div class="box"></div>
</div>
I have a Canvas and want to add a Div/Button in the bottom right-hand corner relative to Canvas. My current code looks as follows:
#container {
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer {
width: 40%;
background-color: red;
height: 100%;
}
#button {
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas {
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
But so far I couldn't manage to find a proper solution for this. It would be great if someone could help me with this.
Is this what you are looking for?
I recommand you checking out this article: CSS Layout - The position Property
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position:relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
I think Temani was right — this puts the button at the bottom right of the canvas, is this not what you wanted?
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position: relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
Like Temani Afif said.
position:relative
on #viewer worked for me.
Is it possible to get this Layout using div's
You could do this with floats and negative margin-top on .e. With masonry you don't need margin-top DEMO
* {
box-sizing: border-box;
}
.content {
width: 200px;
height: 200px;
border: 1px solid black;
}
.item {
border: 1px solid black;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.a,
.d {
width: 33.3333333%;
height: 66.67%;
}
.b,
.e {
width: 66.67%;
height: 33.3333333%;
}
.e {
margin-top: -33.3333333%;
}
.c {
width: 33.3333333%;
height: 33.3333333%;
}
<div class="content">
<div class="a item">a</div>
<div class="b item">b</div>
<div class="c item">c</div>
<div class="d item">d</div>
<div class="e item">e</div>
</div>
Yes it is possible.
I made a fast snippet for you. Using position: absolute.
* {
padding: 0;
margin: 0;
}
.container {
width: 150px;
height: 150px;
}
.a {
position: absolute;
height: 100px;
width: 50px;
background-color: #CCC;
}
.b {
position: absolute;
left: 50px;
height: 50px;
width: 100px;
background-color: #C2C2C2;
}
.c {
position: absolute;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
background-color: #EEE;
}
.d {
position: absolute;
left: 100px;
top: 50px;
height: 100px;
width: 50px;
background-color: #F0F0F0;
}
.e {
position: absolute;
left: 0px;
top: 100px;
width: 100px;
height: 50px;
background-color: #DDD;
}
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
Try this code using table
table {
border-collapse: collapse;
border: 1px solid black;
}
table, td, th {
border: 1px solid black;
}
td
{
padding:10px;
}
<table >
<tr>
<td rowspan="2">A</td>
<td colspan="2">B</td>
</tr>
<tr>
<td>C</td>
<td rowspan="2">D</td>
</tr>
<tr>
<td colspan="2">E</td>
</tr>
</table>
try this code
<div class="wrapper">
<div class="a"><span>A</span></div>
<div class="b"><span>B</span></div>
<div class="c"><span>C</span></div>
<div class="d"><span>D</span></div>
<div class="e"><span>E</span></div>
</div>
CSS code
span{
position: absolute;
top: 30%;
left: 25%;
}
a {
position: absolute;
height: 100px;
width: 50px;
background-color:#f2f2f2;
border:solid 1px #333;
}
.b {
position: absolute;
left: 50px;
height: 50px;
width: 100px;
background-color:#d9d9d9;
border:solid 1px #333;
}
.c {
position: absolute;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
background-color:#bfbfbf;
border:solid 1px #333;
}
.d {
position: absolute;
left: 100px;
top: 50px;
height: 100px;
width: 50px;
background-color:#a6a6a6;
border:solid 1px #333;
}
.e {
position: absolute;
left: 8px;
top: 100px;
width: 91px;
height: 50px;
background-color:#808080;
border: solid 1px #333;
}
Link for above code here https://jsfiddle.net/romesh60/odo4r5aq/2/
I have an element with class A, with rules:
.A {
left: 0px;
}
For some reason, I need to make the element at the right position inside the container and I cannot exclude A class.
Specificity is your friend here:
Here's a couple of options....
Override the class using additional specificity such as another class (or ID)
.container {
height: 50vh;
position: relative;
width: 50%;
bordeR: 1px solid grey;
margin: auto;
}
.A {
position: absolute;
height: 25px;
width: 25px;
left: 0;
background: #000;
margin-bottom: 1em;
}
.A.right {
left: auto;
right: 0;
background: red;
}
<div class="container">
<div class="A"></div>
<div class="A right"></div>
</div>
or a nth-child selector
.container {
height: 50vh;
position: relative;
width: 50%;
bordeR: 1px solid grey;
margin: auto;
}
.A {
position: absolute;
height: 25px;
width: 25px;
left: 0;
background: #000;
margin-bottom: 1em;
}
.A:nth-child(2) {
left: auto;
right: 0;
background: red;
}
<div class="container">
<div class="A"></div>
<div class="A"></div>
</div>
I have three elements stacked into each other. Now I want the innermost element to be placed behind its parent but still in front of its grandparent. I tried different variations on z-index settings, but had no succcess.
The code that shoul work as my understanding of z-index is:
<div style="width: 400px; height: 400px; background-color: purple; position: relative; z-index: 1;">
<div style="width: 200px; height: 200px; background-color: blue; position: relative; z-index: 1;">
<div style="width: 100px; height: 100px; background-color: green; position: relative; z-index: -1;"></div>
</div>
</div>
Except that it does not.
Any solution?
If you remove the position relative from the second div it will work
CSS
.div1{
width: 400px;
height: 400px;
background-color: purple;
position: relative;
z-index: 1;
}
.div2{
width: 200px;
height: 200px;
background-color: blue;
z-index: 1;
}
.div3{
width: 100px;
height: 100px;
background-color: green;
position: relative;
z-index: -1;
left:150px;
}
HTML
<div class='div1'>
<div class='div2'>
<div class='div3'></div>
</div>
</div>
example: http://jsfiddle.net/MFULL/90/
If you mean like:
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
</div>
Then you can use the following method:
Demo: http://jsfiddle.net/ZmvKX/
#a {
width: 300px; height: 300px; border: 1px solid black; background-color: #000;
z-index: -1; position: absolute;
}
#b {
width: 200px; height: 200px; border: 1px solid black; padding: 10px 10px; top: 100px; left: 100px; background-color: #ff0;
position: relative;
}
#c {
width: 100px; height: 100px; border: 1px solid black; padding: 10px 10px; top: -50px; left: -50px; background-color: #fff;
position: absolute; z-index: -2;
}
The trick is to get the stacking contexts right.
As long as elements are part of the page flow, a parent can't be in front of it's children.
You would have to use absolute positioning to take the elements out of the page flow, to make it possible to stack them that way.