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");
Related
I have written a simple code with a main box containing two smaller boxes inside.
I have set the position of the smaller boxes to absolute, in order to set their positioning according to their parent.
What i would like to do is to bring the son2 div in front, since now is hidden by sondiv
I tried the z-index property but (as i expected) my element gets under the parent element, and not under the small blue box
#parent {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
margin-top: 200px;
margin-left: 200px;
}
#son2 {
position: absolute;
background-color: green;
width: 50px;
height: 50px;
margin-top: 20px;
}
#son {
position: absolute;
background-color: blue;
width: 50px;
height: 50px;
margin-top: 10px;
}
<div id="parent">
<div id="son2"></div>
<div id="son"></div>
</div>
Demo on Codepen: https://codepen.io/mattiasu96/pen/KbpyNQ
Tiny change (just add z-index: 1; to son2).
By the way you don't want to set position: absolute for the parent unless you need to change its position from the natural one as well, otherwise go with position: relative so that it's rendered normally but the absolute positioned children still behave as intended.
I've removed the margins from the parent just so you don't have to scroll in the snippet in order to see the divs, but no difference if you need that in your original problem.
#parent {
position: relative;
background-color: red;
width: 100px;
height: 100px;
}
#son2 {
position: absolute;
background-color: green;
width: 50px;
height: 50px;
margin-top: 20px;
z-index: 1;
}
#son {
position: absolute;
background-color: blue;
width: 50px;
height: 50px;
margin-top: 10px;
}
<div id="parent">
<div id="son2"></div>
<div id="son"></div>
</div>
I've got a div with overflow: hidden, and a fairly large collection of elements inside it, which I want to be hidden while overflowing their parent. However I've also got two custom dropdowns, which I'd like to overlap and exit the div while open. Is there anyway to avoid the overflow hidden effect for specific elements? Here's an example. Say I want the blue square to go over the red border and overflow it's parent's bounds, but want the green one to remain cut off and hidden.
YOu can overlap/hidden of certain element with pseudo elements see this example.
html
<div class="red">
<div class="blue"></div>
<div class="green"></div>
</div>
css
* {
box-sizing: border-box;
}
.red {
position: relative;
border: 3px solid red;
width: 300px;
height: 300px;
}
.red:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 70px;
background: rgb(243, 245, 246);
bottom: -70px;
z-index: -1;
}
.blue,.green {
position: absolute;
width: 70px;
height: 70px;
bottom: -40px;
}
.blue {
background-color: blue;
z-index: 1;
left: 40px;
}
.green {
background-color: green;
z-index: -1;
right: 40px;
}
here is 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'm trying to create something in JQuery Mobile, however I need to be able to position a button from the center. Right now, the button is positioned from the top-left corner, and as such if I resize the window, everything is horribly off-center.
<body>
<button>Button</button>
<div />
</body>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 200px;
left: 200px;
}
Fiddle: http://jsfiddle.net/chpt3x1v/4/
I couldn't get JQM working in JSFiddle (didn't know how without it showing loads of errors), so I just used a regular button, but the same premise applies.
TWO IMAGES:
As you can see, it is completely off-center.
UPDATED ANSWER:
You need to give the button a set width and height, and then set the top margin to negative one half the height, and the left margin to negative half the width:
Updated DEMO
<div class="thediv"></div>
<button data-role="none" class="theButton">Button</button>
.thediv {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
.theButton {
position: fixed; /* or absolute */
top: 200px;
left: 200px;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
}
ORIGINAL ANSWER:
You can use fixed positioning and a negative margin to keep it centered:
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<div class="centered"><button>Button</button></div>
</div>
</div>
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
background-color: black;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}
.centered button {
margin: 0 !important;
height: 100%;
}
Updated FIDDLE
Firstly your code doesn't have an opening tag. Secondly, you need to have the parent element, i.e. the div, positioned as relative.
Third, you've positioned your button to the very edge of the div by using the same dimensions. Try:
<body>
<div>
<button>Button</button>
<div />
</body>
div {
position: relative;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}
The z-index property will allow the button to overlay the div.
It may sound a stupid question but I need this div2 behind the div1. But div2 is inside div1 and I need it this way. I tried with z-index but for some reason doesn't work. I even declared its position.
I want to display back-sq-1 behind the box-ft1.
Note that is not possible changing the order of divs, so obviously it would be much easier.
Here is the code:
HTML
<div class="box-ft1">
<span class="back-sq-1"></span>
</div>
CSS:
.box-ft1{
position: absolute;
z-index: 250;
background-color: white;
height: 230px;
width: 400px;
right: 5%;
top:15%;
}
.back-sq-1{
display: block;
z-index: 0;
top: -15px;
left: -15px;
width: 50%;
height: 50%;
position: absolute;
background-color: #a36103;
}