I'm scratching my head over this one. I would like for the green rectangle to be underneath the yellow topbar.
http://jsfiddle.net/PY9ss/1/
HTML:
<div class="body">
<div class="topbar">
<div class="mid">
<div class="attention"></div>
</div>
</div>
</div>
CSS:
.body { background: gray; width: 100%; height: 800px;}
.topbar { background: yellow; width: 100%; height: 50px; position: fixed; top:0; left:0; z-index: 10; }
.mid { background: red; width: 400px; height: 40px; margin: 10px auto 0; position: relative; }
.attention { background: green; width: 100px; height: 40px; border: 1px solid black; position: absolute; top: 30px; left: 0; }
EDIT:
This is fixed by using z-index:-1; on .attention as answered. However, my actual problem was that I had a transparent red background which fooled me, if anyone runs into the same problem.
Just give it a z-index of -1.
Here's the fiddle: http://jsfiddle.net/PY9ss/2/
Does .attention { z-index: -1 } do what you want?
http://jsfiddle.net/thirtydot/PY9ss/3/
Related
I have an outer and inner box with position set to relative. What i want should look like this:
The code is:
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin-left:100px;
margin-top:100px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
With this style the outer div no more wraps the inner box:
CSS
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin: 0;
left: 100px;
top: 100px;
background: green;
border: 2px solid red;
}
Thank you.
* Update *
I would like to add that i don't want to fix the height of the outer box. Thanks.
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
Not really.
Relative positioning moves an element from it’s “default” position that it would normally have - but it keeps the original space it would have required reserved, it does not make it “take” the space at the position it was moved to. So while you can move the inner element to the place you want it, it will not make the outer element “grow” accordingly.
I don't want ("mis")use margin for positioning the inner div
Don’t worry about the “semantics of CSS” too much here … There is often more than one way to achieve a desired optical result, and seldom one way is “wrong” and the other one “right”.
As long as the solution you have achieves what you want, and is not hindered by other restrictions - use it!
When the outerbox has position: relative you can use position: absolute for the .innerbox so you can give dimensions to the .outerbox (width and height) and you can use top and left to position the inner rectangle on every position you want...
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
width:200px;
height:100px;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: absolute;
width: 100px;
height: 50px;
left:98px;
top:48px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Hope this will help you.
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
height:200px;
width:300px;
}
.innerbox {
position: absolute;
float: left;
width: 100px;
height: 50px;
margin: 0;
/*left: 100px;
top: 100px; */
bottom:0;
right:0;
background: green;
border: 2px solid red;
}
<div class="outerbox">
<div class="innerbox">
</div>
</div>
I am trying to overlap two elements using only CSS.
So far I have found one way of doing this. I am however wondering if there are other/better ways of accomplishing this.
The only method I have found, when moving two elements closer vertically, is to subtract a bottom-margin from te bottom element. This is to account for the left over space - and then to subtract the same margin from the upper element to move it down. I have not used this method before and I wonder if it is the best way of accomplishing this overlapping effect?
body {
width: 100%;
height: 100%;
background: lightgrey;
}
.bottom, .top{
width: 20%;
padding-bottom: 20%;
}
.top {
background: blue;
margin-bottom: -250px;
}
.bottom {
padding-top:250px;
margin-bottom: -250px;
background: red;
overflow: hidden;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div class="top"></div>
<div class="bottom"></div>
html, body {
margin: 0;
padding: 0;
}
.parent {
position: relative;
width: 20%;
}
.child {
height: 200px;
background-color: blue;
}
.child--foreground {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
border-radius: 30px;
}
<div class="parent">
<div class="child child--background">
Background
</div>
<div class="child child--foreground">
Foreground
</div>
</div>
if you're trying to place an element over another, I think you should use positioning https://css-tricks.com/almanac/properties/p/position/
I think that's more simple
body {
width: 100%;
height: 100%;
background: lightgrey;
}
.bottom, .top{
width: 20%;
padding-bottom: 20%;
}
.top {
background: blue;
}
.bottom {
background: red;
border-radius: 50% 50% 0 0;
padding-top: 250px;
transform: translateY(-50%);
}
<div class="top"></div>
<div class="bottom"></div>
i try to make that in css
http://prntscr.com/l19jl9
but i only sucsses to
http://prntscr.com/l19juk
https://prnt.sc/l19itx
this my code:
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
background:green;
}
how i can do that?
You can set overflow: hidden to the container and make the inner div a big circle, it will give you the effect you want.
.cont{
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background-color: #e5e5e5;
}
.round-back{
top: -100px;
left: 50px;
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
background-color: red;
}
<div class="cont">
<div class="round-back"></div>
</div>
This isn't exactly the shape that you have in your image, but it's simple and it's likely close enough:
#box {
border:1px solid #000;
border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
width: 200px;
height: 100px;
background-color: #ccc;
}
<div id="box"></div>
The above solution uses elliptical border-radius, which is specified using a slash (/).
Another approach here is much closer to your original image, but it takes significantly more code to implement, and it's quite a bit more brittle too to customise:
#wrapper {
overflow: hidden;
width: 200px;
}
#box::before {
position: relative;
display: block;
content: "";
margin-left: -20px;
background: #ccc;
height: 400px;
width: 400px;
margin-top: -75%;
border-radius: 50%;
z-index: -10;
}
#box {
float: left;
position: relative;
margin-left: 20px;
width: 200px;
height: 100px;
background-color: #ccc;
}
#content {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
<div id="wrapper">
<div id="box">
<div id="content">
</div>
</div>
</div>
This approach uses an oversized circle, which is then clipped by a #wrapper div using overflow: hidden;. The #content div isn't strictly necessary for the shape, but it may make it easier to position something inside the box.
I need to make something like this , how can I make the square on the middle between this two? Here is the CSS and Photo
My Css
#up{
width:100%;
height:30%;
}
#down{
width:100%;
height:70%;
}
#square{
width:40px;
height:40px;
}
Can I setting the square without counting the percentage of the location of the middle line? (because I want to add all something like this into all sessions of the web , and the height of the session will responsive by the text length
You need to use position relative to outer div and position relative to inner div
here is the link how can you do it
fiddle
.one,
.two,
.three {
width: 100%;
height: 50px;
}
.one {
background: yellow;
position: relative;
}
.two {
background: green;
}
.three {
background: red;
}
.square {
position: absolute;
bottom: -10px;
right: 30px;
height: 20px;
width: 20px;
background: white;
}
<div class="one">
<div class="square">
</div>
</div>
<div class="two">
</div>
<div class="three">
</div>
You can have a <div> square as:
<div id="div1"></div>
in CSS:
#div1{
border: 1px red;
height: /*enter the height */
width: /* enter the width */
position: relative;
left: /*enter the distance */
right: /*enter the distance */
top: /*enter the distance */
bottom: /*enter the distance */
z-index: 100 /* make sure other div's have z index lesser than this div's */
}
Put the square INTO the second div, give it a position: absolute and a top: -20px (and left: Xpx- i.e. whatever you need/want).
You can easily do this with position:absolute to your small box div.
Here is the solution that can help you
body,
html {
height: 100%;
margin:0px;
}
#up {
width: 100%;
height: 30%;
background: red;
}
#down {
width: 100%;
height: 70%;
background: blue;
}
#square {
width: 40px;
height: 40px;
background: green;
position: absolute;
top: calc(30% - 20px);
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 1;
}
<div id="up"></div>
<div id="down"></div>
<div id="square"></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.