I am new at CSS positioning but could not understand of positioning the boxes.
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
.box {
width: 260px;
overflow: hidden;
background: #e2e2e2;
padding: 10px;
position:relative;
}
.first {
width: 50px;
height: 50px;
background: #BDBDBD;
float: left;
margin: 10px;
}
.second {
width: 60px;
height: 60px;
background: #889B7F;
float: left;
margin: 10px;
}
.third {
width: 70px;
height: 70px;
background: #B98F91;
float: left;
margin: 10px;
position:absolute;
top:70px;
left:30px;
}
Demo
If I do not set the .box position, third box is appearing up front.
If I set the .box position as relative, third box is appearing under box
If I set set third box position as relative, it goes right.
What is the inner div position rule?
Remove position:absolute; from .third and it will look like This
Snippet:
.box {
width: 260px;
overflow: hidden;
background: #e2e2e2;
padding: 10px;
position:relative;
}
.first {
width: 50px;
height: 50px;
background: #BDBDBD;
float: left;
margin: 10px;
}
.second {
width: 60px;
height: 60px;
background: #889B7F;
float: left;
margin: 10px;
}
.third {
width: 70px;
height: 70px;
background: #B98F91;
float: left;
margin: 10px;
top:70px;
left:30px;
}
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
hi just remove the third box position absolute and check it and it will be look like this then
Related
From this article(https://www.quirksmode.org/blog/archives/2020/02/negative_margin.html) I know that negative margin-right influences any element to the right of the element where it's written but not an element itself.
In the book, "Meloni J. - PHP, MySQL & JavaScript All in One (6th Edition) (Sams Teach Yourself) - 2018" there is an example where I don't see any element to the right. But it still works and it pulls the element somehow. Can somebody explain me how does it work? Why it influences the element where it's written?
body {
margin: 0;
padding: 0;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
right: 200px;
margin-left: -100%;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px; /* THIS MARGIN-RIGHT */
}
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
}
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
Remove some of the properties to better understand what is happening initially
body {
margin: 0;
padding: 0;
width:800px;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
border:1px solid red;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
/*right: 200px;
margin-left: -100%;*/
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
/*margin-right: -125px;*/ /* THIS MARGIN-RIGHT */
}
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
/*width: 100%;*/
}
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
We have 3 float elements side by side. One with auto width and two with explicit width. The total width will define the width of the wrapper W.
Now if we add width:100% to #content_area it will take 100% of W push the other to the next row:
body {
margin: 0;
padding: 0;
width:800px;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
border:1px solid red;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
/*right: 200px;
margin-left: -100%;*/
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
/*margin-right: -125px;*/ /* THIS MARGIN-RIGHT */
}
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
}
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
Now if you add margin-left:-100% to the left element it means shift this element by -W thus it will overlap the #content_area element
body {
margin: 0;
padding: 0;
width:800px;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
border:1px solid red;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
/*right: 200px;*/
margin-left: -100%;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
/*margin-right: -125px;*/ /* THIS MARGIN-RIGHT */
}
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
}
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
Then we shift it using right equal to its width to remove the overlap and make it on the top of the right padding:
body {
margin: 0;
padding: 0;
width:800px;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
border:1px solid red;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
right: 200px;
margin-left: -100%;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
/*margin-right: -125px;*/ /* THIS MARGIN-RIGHT */
}
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
}
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
For the right element it's almost the same trick but the negative margin-right which is equal to the width will negate the width effect making the element taking 0 space on the layout so it will move back to the first row and will overlap the padding area on the right.
Here is an illustration of the right element alone to better understand:
body {
margin: 0;
padding: 0;
}
#wrapper {
float: left;
border:2px solid green;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px;
animation:change 5s linear infinite alternate;
}
#keyframes change{
from {
margin-right:0;
}
}
<div id="wrapper">
<div id="right_side">RIGHT SIDE</div>
</div>
Notice how the width of wrapper become 0 when width+margin of the right element is 0
And if we add another element inside you will see the jump to the first row:
body {
margin: 0;
padding: 0;
}
#wrapper {
float: left;
border:2px solid green;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px;
animation:change 5s linear infinite alternate;
}
#keyframes change{
0% {
margin-right:0;
}
90% {
margin-right:-125px;
}
}
<div id="wrapper">
<div style="float:left;width:100%">aaa</div>
<div id="right_side">RIGHT SIDE</div>
</div>
And if you add padding-right we make the right element overlap that padding when it jumps to the first row
body {
margin: 0;
padding: 0;
}
#wrapper {
float: left;
border:2px solid green;
padding-right:125px;
background:linear-gradient(yellow,yellow) right/125px no-repeat; /* to illustrate the padding */
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px;
animation:change 5s linear infinite alternate;
}
#keyframes change{
0% {
margin-right:0;
}
90% {
margin-right:-125px;
}
}
<div id="wrapper">
<div style="float:left;width:100%">aaa</div>
<div id="right_side">RIGHT SIDE</div>
</div>
Please see the code in jsbin
Screenshot:
All I need is just to have blue on top, then white, then greens. So ideally:
I tried z-index, create stacking context... nothing worked.
It might have something to do with negative margin in CSS
I'm happy to change the HTML code or change the current CSS, as long as I can get the desired effect.
.left,
.right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
}
<div class="out">
<div class="left"></div>
<div class="bar">
<div class="circle"></div>
</div>
<div class="right"></div>
</div>
Edit
I should have mentioned that my difficulty was mostly achieving the effect while keeping the current HTML setup (i.e. circle in bar). Turns out it doesn't seem possible, because
If no zindex on bar, can't make sure it's on top of circle
If set zindex on bar, then it creates new stacking context, then circle can't be on top of 2 greens. Because greens are on different stacking context
you can simplify this using just the div out with position + z-index
.out {
position: relative;
width: 400px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: absolute;
top: 0;
left: 50%;
z-index: 10
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
position: absolute;
top: 0;
left: 50%;
z-index: 1
}
<div class="out">
<div class="circle"></div>
<div class="bar"></div>
</div>
EDITED : edited my answer after reading more carefully :) sorry about that
see here > jsFiddle
or snippet below :
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
z-index:6;
position:relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
top: 10px;
position:absolute;
left:0;
right:0;
margin:0 auto;
z-index:5;
}
.out {width:420px;position:relative;}
<div class="out">
<div class="left"></div><div class="bar"></div><div class="circle"></div><div class="right"></div>
</div>
OR if you don't want different bg color for .left and .right just use one big div .out and position the bar and circle on top of it :
.out {
position: relative;
width: 420px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
right:0;
margin:0 auto;
z-index: 2
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
right:0;
margin:0 auto;
z-index: 1
}
<div class="out">
<div class="bar"></div>
<div class="circle"></div>
</div>
What if we just interchange .bar as child element of .circle. And try as below,
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
margin:-10px 10px;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
display:inline-block;
position:absolute;
margin:10px -20px;
}
<div class="out">
<div class="left"></div>
<div class="circle"><div class="bar"></div></div>
<div class="right"></div>
</div>
You could even further simplify your markup and utilize a pseudo selector instead of wrestling with stacking order, and order elements naturally.
.out {
width: 400px;
padding: 10px 0;
background: green;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.circle:after {
content: '';
width: 20px;
height: 60px;
background-color: blue;
display: block;
margin: 0 auto;
position: absolute;
top: -10px;
left: 10px;
}
<div class="out">
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
</div>
Use transform.
https://jsbin.com/geconefine/1/edit?html,css,output
.out{
position: relative;
z-index: 0;
}
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position: relative;
z-index: -2;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
transform: translateX(-10px);
margin-top: 10px;
position: relative;
z-index: -1;
}
You need a position before z-index will do anything. Since I don't see any applied in your current css that might be your issue.
.left, .right{
position: relative;
z-index: 1;
}
.circle{
position: relative;
z-index: 4;
}
.bar{
position: relative;
z-index: 5;
}
I am new to Asp.Net and CSS
i want div header fixed and Bottom left div fixed. And right side two div width based on percentage. So i tried like this
CSS
left: 0px;
position:fixed ;
z-index: 2;
border-bottom: 1px solid #00e5e6;
}
#DivLogo
{
height: 80Px;
width: 350px;
position:fixed;
margin-left: 20px;
margin-top: 10px;
border:1px solid #aaac62;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-color:Blue
}
#DivShow
{
height: 30Px;
width: 350px;
position:fixed;
float:left;
margin-left: 20px;
margin-top: 95px;
}
#DivRight
{ height: 70px;
width: 150px;
position:fixed;
left: 85%;
margin-top: 10px;
top: 0px;
}
#DivMenuRight
{
height: 30Px;
width: 500px;
position:fixed;
right:15%;
margin-top: 95px;
}
#DivBody
{
width: 100%;
height: 380px;
position: fixed;
margin-top: 155px;
margin-bottom: 20px;
top: 4px;
left: -2px;
margin-left: 0px;
margin-right: 0px;
}
#DivLeft
{
width: 200px;
height: 100%;
position: fixed;
float: left;
border-right: 1px solid #00e5e6;
}
#DivBodyRight
{
height: 100%;
position:absolute;
float: left;
right:0px;
left:200px;
top: 156px;
}
#DivVersion, #DivRelease, #DivUserAccount, #DivOther
{
width:70%;
height: 100%;
position:absolute;
float: left;
top:0px;
left:0px;
border-Right: 1px solid #00e5e6;
}
#grdVersions, #grdRelease, #grdUserAccount, #grdOther
{
width:100%;
height:100%;
}
#DivUserDetail
{
width: 30%;
height: 100%;
position:absolute;
float: right;
right:0px;
top:0px;
border-Left: 1px solid #00e5e6;
}
ASP.Net
<div id="DivMain">
<div id="DivHeader">
<div id="DivLogo">
</div>
<div id="DivShow">
</div>
<div id="DivRight">
</div>
<div id="DivMenuRight">
</div>
</div>
<div id="DivBody">
<div id="DivLeft">
</div>
<div id="DivBodyRight">
<div id="DivVersion" runat=server>
</div>
<div id="DivUserDetail">
</div>
</div>
</div>
</div>
Fiddle https://jsfiddle.net/fsp1vw2u/
Bottom right side div not showing properly. Its Start from middle.
What am doing wrong here?
am using visual studio 2008 and CSS 2.1
Change Position absolute to fixed
#DivBodyRight {
float: left;
height: 100%;
left: 200px;
position: fixed;
right: 0;
}
https://jsfiddle.net/fsp1vw2u/9/
I'm trying to set div's position like this:
but i can't set image (green box) in position.
orange box is on top
blue and lightgreen div are buttons
red frame is static distant under orange box
green box is link with image inside, covering partly blue and lightgreen buttons.
every links must stay clickable every time.
I can't centering green image and set it above orange div partly.
Example code here
<div class="header-container">
<div class="nav-container">
<div class="logo">
Click!
</div>
<div class="nav">
Click!
</div>
</div>
<div class="header-image">
<div class="image">
Click!
</div>
</div>
<div class="menu-container">
Click!
</div>
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
I've uploaded your jsfiddle here.
Addded the following css:
.header-image {
position: absolute;
top: 40px;
left: 20%;
}
also added extra margin-top for the .menu-container
.menu-container {
margin-top: 80px; //instead of 50px
}
I've positioned it absolute because this way it will go wherever you want it based on the body relative positioning.
adding this to image should work:
margin:0 auto;
position:relatve;
z-index:66;
margin-top:-10px
http://jsfiddle.net/o3oyuzb9/2/
try this
only changed the css
body,html{margin: 10px;}
.header-container{
width: 100%;
}
a{
text-decoration:none;
color:#000;
padding: 10px 0px;
display: block;
text-align: center;
}
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
margin: 0 auto;
margin-top: -20px;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
just add this to your image class:
margin: 0 auto;
margin-top: -20px;
Anybody tell me what is problem with the following code.
Left and top margins on .middle do not work.
I worked a lot but could not found any problem with the code below.
Please observe .middle class and div on which .middle is applied.
.container {
height: 48px;
width: 80%;
background-color: #999;
margin: 0 auto;
}
.left {
margin-left: 6px;
height: 40px;
background-color: red;
margin-top: 4px;
float: left;
overflow: hidden;
width: 30%;
}
.middle {
margin-left: 6px;
height: 40px;
background-color: green;
margin-top: 4px;
overflow: hidden;
width: auto;
}
.right {
margin-left: 6px;
height: 40px;
background-color: blue;
margin-top: 4px;
margin-right: 6px;
float: right;
overflow: hidden;
width: 40%;
}
.button {
float: right;
margin-right: 6px;
height: 32px;
width: 100px;
border-style: solid;
border-width: 1px;
margin-top: 4px;
border-color: #333;
}
p {
color: blue;
overflow: hidden;
width: 50%;
}
<div class="container">
<div class="right">
<button class="button">Search</button>
</div>
<div class="left"></div>
<div class="middle"></div>
</div>
This is primarily due to collapsing margins.
With regard to the top margin, in effect it is still there but it is spilling out of .container. To fix add overflow: auto; to .container to stop margin collapsing.
The second is due to .left being floated. To add the margin to the left of .middle you can either:
Use calc(30% + 12px) ((width of .left) + (margin of .left) + (margin of .middle))
Add margin-right: 6px; to .left as floated element margins do not collapse Thanks to #Alohci for this suggestion
.container {
height: 48px;
width: 80%;
background-color: #999;
margin: 0 auto;
overflow: auto;
}
.left {
margin-left: 6px;
height: 40px;
background-color: red;
margin-top: 4px;
float: left;
overflow: hidden;
width: 30%;
}
.middle {
margin-left: calc(30% + 12px);
height: 40px;
background-color: green;
margin-top: 4px;
overflow: hidden;
width: auto;
}
.right {
margin-left: 6px;
height: 40px;
background-color: blue;
margin-top: 4px;
margin-right: 6px;
float: right;
overflow: hidden;
width: 40%;
}
.button {
float: right;
margin-right: 6px;
height: 32px;
width: 100px;
border-style: solid;
border-width: 1px;
margin-top: 4px;
border-color: #333;
}
p {
color: blue;
overflow: hidden;
width: 50%;
}
<div class="container">
<div class="right">
<button class="button">Search</button>
</div>
<div class="left"></div>
<div class="middle"></div>
</div>
Seems like you haven't set a width and float for the middle div. One work around would be to add position:relative and replace margin-top and margin-left with top and left.
Fiddle: http://jsfiddle.net/rqLb7m4a/
You need to mention width, some time width auto will not work and also give float: left; property to middle div.
And you can code div's like left, midile and right
<div class="left"> </div>
<div class="middle"> </div>
<div class="right"> </div>
Just add float:left to the middle element and set the width to a value.
But here i think you want this div to take all the width that it can, right ?
I think it's time to use flexbox :
http://jsfiddle.net/w16cq27x/
.container {
height: 48px;
width: 80%;
background-color: #999;
margin: 0 auto;
display:flex;
}