I am trying to complete a style similar to the picture below me, whereby you have a left div partially in the background of a right div. Essentially, I want two side by side divs to be able to overlap each other, one in the background, and one in the foreground.
This is what I'm trying to achieve:
This is what I have so far:
.wrapper{
display: grid;
width: fit-content;
align-items: center;
grid-template-columns: 1fr auto;
border: solid 2px black;
}
.left{
width: 150px;
height: 115px;
background-color: red;
border: 2px red solid;
z-index:-999;
}
.right{
width: 120px;
height: 150px;
background-color: blue;
border: 2px blue solid;
z-index: 999;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
I've tried using the z-index field to no avail. Also, in addition to being able to control which element is in the background; on mouse hover, I would like the left div in the background to "float" to the foreground and increase in size partially, and the right div to "float" to the back and partially decrease in size.
I hope my problem was adequately described, thank you.
I think the display: grid is not helping you here as it's trying to confirm the child divs into a grid (ie, not overlapping).
I would just set the two sides to have whatever width you want (eg 50%) and use z-index to overlay them.
See https://jsfiddle.net/47bh3eqk/2/
.wrapper {
max-width: 400px;
position: relative;
}
.left, .right {
width: 50%;
height: 200px;
position: absolute;
}
.left {
background-color: red;
left: 0;
}
.right {
background-color: blue;
right: 0;
z-index: 99;
-webkit-box-shadow: -4px 0px 15px -1px #000000;
box-shadow: -4px 0px 15px -1px #000000;
}
Related
I created a div with a border-radius 4% and wanted to add a div inside it. But now the border-radius is getting affected. How can I add the new div without affecting the previous border-radius.
If I add same border radius for the inner div
Without any border-radius
body {
background: #4FA2AD;
}
.upper {
background-color: #035961;
height: 30%;
}
.main {
background-color: antiquewhite;
height: 50vh;
width: 25%;
margin: 25vh auto;
border-radius: 4%;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
}
<body>
<div class="main">
<div class="upper">
</div>
</div>
</body>
Overflow hidden will cut off any content that goes outside of the parents border, including any overlap at the corners.
overflow: hidden;
This is sometimes not a viable solution (Where you require content to overflow or extend the container) however since you have a fixed size, it is valid in this case.
body {
background: #4FA2AD;
}
.upper {
background-color: #035961;
height: 30%;
}
.main {
background-color: antiquewhite;
height: 50vh;
width: 25%;
margin: 25vh auto;
border-radius: 4%;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
overflow: hidden;
}
<body>
<div class="main">
<div class="upper">
</div>
</div>
</body>
Is there any better way of setting two borders like in the example below? I could only do it with positioning. I'm new here so I apologize for any mistakes whatsoever.
.border1 {
margin: 0 auto;
height: 300px;
width: 250px;
border: 9px solid red;
position: relative;
}
.border2 {
border: 9px solid blue;
height: 250px;
width: 300px;
position: absolute;
top: 12px;
left: -33px;
}
<div class="border1">
<div class="border2"></div>
</div>
Absolute is indeed a good and easy way here.
You can also use a pseudo and only coordonates to size the second border box.
.border1 {
margin: 0 auto;
min-height: 150px;/* allow it to grow */
width: 250px;
padding:20px 0.5em;
border: 9px solid red;
position: relative;
}
.border2:before {
content:'';
border: 9px solid blue;
pointer-events:none;/* to allow clicking through else you may use a negative z-index */
position: absolute;
top: 12px;
bottom:12px;
left: -33px;
right:-33px;
}
<div class="border1 border2">
add anything here instead setting height
</div>
This is a different approach. I used box-shadow as the second border and you will no longer need a second div for second border.
.border{
margin:0 auto;
height:300px;
width:250px;
border:9px solid red;
position:relative;
box-shadow: 0 0 0px 9px blue;
}
<div class="border"></div>
You can do it with the Flexbox and without unnecessary calculations:
.border1 {
margin: 0 auto;
height: 300px;
width: 250px;
border: 9px solid red;
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
align-items: center; /* and vertically */
}
.border2 {
flex: 0 0 300px; /* doesn't shrink, flex-basis set to "300px" (initial width) */
border: 9px solid blue;
height: 250px;
}
<div class="border1">
<div class="border2"></div>
</div>
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
I use the above code to display a big div with two divs in it. For the first one I use position: absolute to place it on bottom left of the div.
How can I extend the height of the second gray one so that it's 5 pixels above the first, but without having to measure its exact height in pixel (like the pic below)? I can set height: 50px; for example but is there another way?
I would use a flexbox approach rather than absolute positioning (comments in css below)
div.div1 {
display: flex;
flex-direction:column;
/* add the above styles*/
border: 1px solid black;
min-height: 100px; /*I would also change this to min-height otherwise it may cause issues if your text goes to 2 lines*/
width: 100px;
padding: 10px;
}
div.div2 {
flex-grow:1; /* make div grow to fill the space */
margin-bottom:5px; /* minus the amount of margin you wanted */
background-color: gray;
border: 1px solid black;
padding: 10px;
}
div.div3 {
/* remove absolute positioning */
border: 1px solid red;
height: 20px;
width: 20px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
EDIT: I suggest that, if you can focus on the modern browser features, going the flexbox way as shown by Pete is definitely a cleaner approach than the ones I've shown bellow. That being said, here are the alternatives:
You can use calc to dynamically determine the height of div2:
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(
100%
- 20px /* div1: padding top and bottom */
- 2px /* div1: border top and bottom */
- 20px /* div3: height */
- 2px /* div3: border top and bottom*/
- 5px /* desired separation*/
);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
You can avoid including padding and border width in your calculations if you set the box-sizing for your divs to border-box (You might want to set this for all elements):
div {
box-sizing: border-box;
}
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(
100%
- 20px /* div3: height */
- 5px /* desired separation */
);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
There's this rather new, hip CSS property called 'flex' which you're now going to love because it does it exactly that without the need of positioning absolute etc. I did something similar yesterday where I had a vertical nav bar and I wanted one menu at the top and one at the bottom. In a responsive environment; using your approach of positioning absolute it would've resulted in a nasty mess of working out heights to stop the content from overlapping. Flex prevented this! Yeyyyyy
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In your example you want to do something like this:
.div1 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}
.div2 {
align-self: flex-start;
flex-grow:1;
width:100%;
}
.div3 {
align-self: flex-end;
width:100%;
}
Now your div 3 will always be at the bottom. Although now .div3 will extend the entire width so within the div insert your content and BOOM done.
You can use calc on the heightsetting as in my snippet below. That setting is 100% minus (20 + 10 + 2) for the height, border and bottom of the lower DIV minus (5 + 2) for the distance and the border of the first DIV minus 10px for the padding of the parent, summing up to 49px .
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(100% - 49px);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
Here's an image of what I'm referring to:
If you have some fixed height h from the baseline that the pin lies, and the green element is dynamically sized, how can you make the orange element take the space between the two?
Have exactly what you need in this case using a flexbox.
The pin approximately stays at the same height above the baseline give or take 1px.
How it works: When the green element grows say 10px the pin is elevated by 5px. But the flex setup means the dummy and the orange box reduces 5px each thus keeping the pin at a contant height.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
height: 100px;
border-bottom: 1px solid black;
}
.dummy {
flex: 1;
}
.top {
height: 20px;
width: 20px;
border: 1px solid green;
position: relative;
}
.top div {
position: absolute;
height: 3px;
width: 3px;
background: #880015;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom {
width: 50px;
border: 1px solid orange;
flex: 1;
}
<div class="wrapper">
<div class="dummy"></div>
<div class="top">
<div></div>
</div>
<div class="bottom"></div>
</div>
You can use table properties for this. Table cells fill its parent width. If one cell is short, the other one will expand to fill its parent. The trick here is to rotate 90ยบ your "table" and it's done. To change the 'height" of your pinned item you will actually be changing its width. The anchor element will resize accordingly.
Be aware of this though: http://caniuse.com/#search=transform
.baseline{
height: 100px;
width: 100px;
border: 3px solid black;
display: table;
transform: rotate(90deg);
}
.pinned,.anchored{
display: table-cell;
}
.pinned{
width: 30px;
border: 3px solid green;
}
.anchored{
border: 3px solid orange;
}
<div class="baseline">
<div class="pinned">
</div>
<div class="anchored">
</div>
</div>
I got two divs. One next to another.
<div id="first"></div>
<div id="second"></div>
When the background color of the first div is not set, than the second div drops shadow on the first one as you would normally expect it to. Example: http://jsfiddle.net/a46zueo9/1/
#first {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
}
#second {
width: 100px;
height: 100px;
border: 1px solid red;
box-shadow: 0 0 20px #000;
margin-left: 100px;
}
But if the first div has some background color set, than the second div stops dropping shadow on it.
#first {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: #4af;
float: left;
}
#second {
width: 100px;
height: 100px;
border: 1px solid red;
box-shadow: 0 0 20px #000;
margin-left: 100px;
}
Example: http://jsfiddle.net/a46zueo9/
I was wondering if it's normal behavior. If so, than why? If not than how can I fix it?
yes its a normal behavior in first example that div is like a frame with nothing in the background to support
but in second example it have base so its like a sheet which can cover
to solve it
first{
z-index: 1;
position: relative;
}
second{ z-index: 2;
position: relative; }
It's z-index problem, because when there is no background-color, than it's transparent. Use #second{ z-index: 6; position: relative;} JSFiddle
Just remove marging-left from second div, and add float: left; on it.