At the moment I'm trying to make a system where once something happens, there will be a big div and error message over the current div to say that the user can no longer interact with the parent div.
The way I tried doing this (in the child element to the parent) was adding a position: absolute; and top: 0; left:0 but that just made everything weirdly aligned and kind of ruined the flow and build of the divs.
So my question is, is there a better way to display a div over another div where, for example, I could make it's opacity 0.8, and be able to see through it, over the entire div behind it, kind of like a z-index: 1;.
JSFiddle: https://jsfiddle.net/331nr1L0/
You can just make the parent position relative then set absolute positioning on the child. I'd need to see more examples of how everything got weirdly aligned like you mentioned.
.parent {
width: 100%;
height: 200px;
background-color: lightgrey;
border: solid black 1px;
border-radius: 3px;
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: hsla(270, 100%, 50%, .4);
}
<div class="parent">
<div class="child">
</div>
</div>
Updated your jsfiddle here: https://jsfiddle.net/331nr1L0/1/
You can use the transparency as you mentioned if you would like, just remember that css changes made to the parent div will fall through to the child div, unless you overwrite them by specifying a different value for the same option in the child. EG
.parent {
width: 100%;
height: 200px;
background-color: lightgrey;
border: solid black 1px;
border-radius: 3px;
opacity:0.5;
}
.child {
opacity:1;
}
If you want it to overlap the child over the parent, I'd adjust the margins as well.
Change the colours you want and this should do the trick (as an alternative to the other responses)
Here, the child has a dashed white border (change it to solid, any colour you want)
.parent {
width: 100%;
height: 200px;
background-color: lightgrey;
border: solid black 1px;
border-radius: 3px;
}
.child {
border: 5px dashed white;
border-radius: 3px;
background-color: red;
opacity: 0.4;
height: 210px;
width: 110%;
top: -10px;
left: -10px;
margin: -10px;
}
<div class="parent">
<div class="child">
</div>
</div>
Related
I am trying to make something like this...
where the blue is the div, and the black is the logo. how is something like this achieved? I was messing around with the transform but this also does one side.
This is a great opportunity to use CSS shapes!
If you think of the blue shape as "a blue rectangle that is immediately followed by a blue downward-pointing triangle, with no gap between them", then we just need to figure out how make that triangle and put it in the right place.
Let's start with your current HTML & CSS (I'm basing this on the screenshot, and assuming the logo element is outside the blue <div>):
.pointy {
background-color: #0086FD;
height: 285px;
}
.logo {
background-color: #000;
height: 200px;
margin: 0 auto;
transform: translateY(-30%);
width: 200px;
}
<div class="pointy"></div>
<div class="logo"></div>
No need to modify your HTML here. We're going to use the :after pseudo element to add the triangle shape after the div.
I used the handy CSS Triangle Generator to get a triangle started using border properties.
A few other details:
adding position: relative to the div, so that...
we can position the triangle at the bottom with position: absolute and top: 100%
we're applying width: 100vw to the div, because...
since the triangle is created using borders, and borders can't be a percentage width, we can set the two relevant border widths to 50vw, and they'll be exactly half the width of the 100vw parent
Let's make the triangle red for the moment, so you can see it clearly.
.pointy {
background-color: #0086FD;
height: 285px;
position: relative;
width: 100vw;
}
.pointy:after {
border-color: #f00 transparent transparent transparent;
border-style: solid;
border-width: 50px 50vw 0 50vw;
content: '';
display: block;
height: 0;
position: absolute;
top: 100%;
}
.logo {
background-color: #000;
height: 200px;
margin: 0 auto;
transform: translateY(-30%);
width: 200px;
}
<div class="pointy"></div>
<div class="logo"></div>
Final solution
Now that we have created and positioned our triangle, let's make it the same color as the div. (I've also tweaked the vertical positioning of .logo to achieve the desired effect.)
Voila: pointy blue div, no extra HTML needed.
.pointy {
background-color: #0086FD;
height: 285px;
position: relative;
width: 100vw;
}
.pointy:after {
border-color: #0086FD transparent transparent transparent;
border-style: solid;
border-width: 50px 50vw 0 50vw;
content: '';
display: block;
height: 0;
position: absolute;
top: 100%;
}
.logo {
background-color: #000;
height: 200px;
margin: 0 auto;
transform: translateY(-20%);
width: 200px;
}
<div class="pointy"></div>
<div class="logo"></div>
I'm trying to put a green area, a pseudo element, to the right of of a blue element, the pseudo element's parent, such that the green element doesn't increase the width of the red scroll area, the container. My actual use-case is a bit more complex, but it relies on using a pseudo element so this below example sets up the problem well. I've included two blue areas and two green areas simply to show that I want the scroll area to scroll if the blue width is large enough. I just don't want the green area to be part of the calculation:
* {margin:0;padding:0}
div {
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
overflow: auto;
}
span {
display: inline-block;
height: 50px;
position: relative;
background-color: blue;
vertical-align: top;
}
span:before {
content: '';
position: absolute;
left: 100%;
width: 500px;
top: 0;
bottom: 0;
background-color: green;
}
<div>
<span style="width:50px"></span>
<span style="width:250px"></span>
</div>
JS Fiddle
Ideally the green pseudo element would be pulled out of the layout completely and have no width. The problem is for the background-color to work it requires a width. I'm strongly suspecting I can't use background-color for this. If something like outline-right: 500px solid green; existed that would be a solution, but I can't find anything like that. I can't use box-shadow, border-right, or anything else since those all add to the width. Is there any mechanism in CSS that would allow the green area to not be included in the red's scroll width area?
Using an outer container with the inner one set to overflow: hidden; removes the absolutely positioned elements from being included in the width and scroll area calculation.
Using min-width: 100%; ensures that the inner container takes up at least the whole width of the outer container.
* { margin: 0; padding: 0; }
#first {
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
overflow: auto;
}
#second {
display: inline-block;
overflow: hidden;
min-width: 100%;
}
span {
display: inline-block;
height: 50px;
position: relative;
background-color: blue;
vertical-align: top;
}
span:before {
content: '';
position: absolute;
left: 100%;
width: 500px;
top: 0;
bottom: 0;
background-color: green;
}
<div id="first">
<div id="second">
<span style="width:50px;"></span>
<span style="width:250px;"></span>
</div>
</div>
JS Fiddle
I have a div that has width set to 50%, and a border-radius of 50% in order to make it a circle. Inside there are 3 other divs that serve as buttons, and a fourth div, that serves the purpose of making it as tall as it is wide.
Now I want to position my buttons relative to the div .appContainer. Basically what I'm trying to achieve is that one button is always at the top center of the div, and the other two are at the bottom right and left corners.
Now something strange happens to my buttons - instead of positioning according to the parent element, when the parent div is smaller than the page, they are always positioned at the bottom of the screen.
Any ideas on how to achieve what I want to are appreciated.
If anything is unclear please let me know and I'll edit the main post.
body {
background-color: gray;
margin: 0;
padding: 0;
}
.appContainer {
width: 50%;
margin: 0 25%;
background-color: white;
border-radius: 50%;
}
.heightElement {
height: 0;
padding-bottom: 100%;
}
#button1, #button2, #button3 {
position: absolute;
background-color: red;
padding: 1em;
border-radius: 50%;
}
#button1 {
right: 50%;
top: 0%;
}
#button2 {
right: 25%;
top: 100%;
}
#button3 {
right: 75%;
top: 100%;
}
<div class="appContainer">
<div class="heightElement"></div>
<div id="button1">Button 1</div>
<div id="button2">Button 2</div>
<div id="button3">Button 3</div>
</div>
Your .appContainer might need a position: relative style rule.
.appContainer {
position: relative; // Try adding this line.
width: 50%;
margin: 0 25%;
background-color: white;
border-radius: 50%;
}
What this now means, is that anything within this item that is positioned absolutely, will be positioned relatively to its parent.
Here's a working demo for you: https://jsfiddle.net/usgp8ume/
I ran into this challenge: fiddle. The short story is, I want to have the green block in the middle of the z-order, without having to change the HTML. So yellow on the bottom, green in the middle, and red on top.
.parent {
background-color: yellow;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
z-index: 1;
}
.child {
background-color: red;
position: relative;
top: 10px;
left: 20px;
height: 50px;
width: 150px;
z-index: 100;
}
.other-guy {
background-color: green;
position: absolute;
top: 40px;
left: 100px;
height: 200px;
width: 200px;
z-index: 50;
}
<div class="parent">
Chillin in the background
<div class="child">
I really want to be on top.
</div>
</div>
<div class="other-guy"> I want to be in the middle! </div>
The longer story is, in my solution I'm using bootstraps grid system to position the child element so the whole thing is responsive. The middle layer is a Google Maps element that needs to be manipulated by the user. My previous solution had an absolutely positioned child element on the map, which works, but I don't know how to make that responsive.
My new solution works great from a responsive angle, but then I found out that the parent is blocking interaction with the maps.
So I now need a solution have some responsive elements on top of Google Maps.
I removed the position absolute from the yellow div and removed the z-index from the green div. Maybe this is something as you said.
.parent {
background-color: yellow;
top: 0;
left: 0;
height: 200px;
width: 200px;
z-index: 1;
}
.child {
background-color: red;
position: relative;
top: 10px;
left: 20px;
height: 50px;
width: 150px;
z-index: 2;
}
.other-guy {
background-color: green;
position: absolute;
top: 40px;
left: 100px;
height: 200px;
width: 200px;
}
<div class="parent">Chillin in the background
<div class="child">I really want to be on top.</div>
</div>
<div class="other-guy">I want to be in the middle!</div>
Check out this article:
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
If this article is right and I understood it correctly, then it's not possible, because yellow and red are part of the same stacking context.
I did accomplish your goal by adding jquery to your fiddle and adding this line of code to actually move the green element into the yellow one:
$(".other-guy").insertAfter(".child");
Need background color for child container extending till width of view point. Properties needed should be applied to child container only.
I tried giving huge border to child container till parent container, but it did not work in high resolution screens.
Background color should applied only to the area of text.
.outer{
height: auto;
border: 1px solid red;
width: 420px;
}
.inner{
margin-left: 100px;
margin-right: 100px;
width: 200px;
height: 300px;
border: 1px solid green;
}
<div class="outer">
<div class="inner">Need background color for child container extending till width of view point. properties needed have to be given only within child container.
</div>
</div>
Here is the jsfiddle link to better understand the scenario:
https://jsfiddle.net/5qp1a3um/
You can set a wrapper to contain the desired color like this:
.bg-wrapper{
background: #54BCDF; /*change to desired color*/
}
.outer {
height: auto;
border: 1px solid red;
width: 420px;
margin: 0 auto;
}
.inner {
margin-left: 100px;
margin-right: 100px;
width: 200px;
height: 300px;
border: 1px solid green;
}
<div class="bg-wrapper">
<div class="outer">
<div class="inner">Need background color for child container extending till width of view point. properties needed have to be given only within child container.</div>
</div>
</div>
Bearing in mind that you can only change the css of child container you can try with this modification of the answer of Rick to extend the background:
.outer{
height: auto;
border: 1px solid red;
width: 420px;
}
.inner{
margin-left: 100px;
margin-right: 100px;
width: 200px;
height: 300px;
border: 1px solid green;
}
.inner:before {
content: '';
background: #54BCDF; /*change to desired color*/
position: absolute;
width: 100%;
height: 300px;
left: 0;
z-index: -1;
}
<div class="outer">
<div class="inner">
Need background color for child container extending till width of view point. properties needed have to be given only within child container.
</div>
</div>
But to center .outer I'm afraid that you'll have to add the style margin: 0 auto
Set the parent's position to relative:
.outer {
position: relative;
}
Then create a pseudo-element on the child, which covers the extent of the parent (width and height 100%).
Give it a negative z-index so its background won't hide the content:
.inner:before {
content: '';
background: lightgreen;
position: absolute;
width: 100%;
height: 100%;
left: 0;
z-index: -1;
}
Fiddle 1
Update based on the fact that you can't style the parent
Set the child's position to relative:
.inner {
position: relative;
}
The pseudo-element's width should now be 100% plus the difference between the child's and parent's widths.
You'll need to move the pseudo-element left to account for the child's left margin:
.inner:before {
content: '';
background: lightgreen;
position: absolute;
height: 100%;
width: calc(100% + 220px); /* parent's width - child's width = 220 */
left: -100px; /* account for left margin */
z-index: -1;
}
Fiddle 2
Not completely sure if I understand what you are trying to do, but I gave it a shot.
In the CSS if you change the margin to padding, then any background color on the child element will extend to the parent. background color is includes the padding but not the margin.
I also had to bump up the width of the child 20px for it to fill properly.
Updated fiddle: https://jsfiddle.net/5qp1a3um/1/
.inner{
padding-left: 100px;
padding-right: 100px;
background-color: blue;
width: 220px;
height: 300px;
border: 1px solid green;
}
Use padding instead of margin, that's the right way to do it.
padding: 0 100px;
https://jsfiddle.net/5qp1a3um/2/