Im just trying to put my footer exactly below one div with 100% width but if I use position:absolute its not going to be 100% width.
.box {
width:100%;
left:0%;
height:700px;
position:absolute;
margin-top:6%;
background-image:url();
background-position-y:90%;
background-position-x:50%;
}
.footer {
background-color:#ffffff;
width:100%;
height:90px;
position:absolute;
bottom:-30%;
left:0%;
box-shadow:0px -5px 0px 0px #c72031;
}
HTML:
<div class="box"></div>
<div class="footer"></div>
https://jsfiddle.net/opj984j7/
Just put the footer inside the box and give it bottom: 0; to display without any margin from the bottom. Or to display below, reduce bottom of the footers height bottom: -90px;:
.box {
width: 100%;
left: 0%;
height: 700px;
position: absolute;
margin-top: 6%;
background: #000;
}
.footer {
background-color: #ffffff;
width: 100%;
height: 90px;
position: absolute;
bottom: -90px;
left: 0%;
box-shadow: 0px -5px 0px 0px #c72031;
}
<div class="box">
<div class="footer"></div>
</div>
Absolute Position: This is a very powerful type of positioning that allows you
to literally place any page element exactly where you want it. You use
the positioning attributes top, left bottom and right to set the
location. Remember that these values will be relative to the next
parent element with relative (or absolute) positioning. If there is no
such parent, it will default all the way back up to the element
itself meaning it will be placed relatively to the page itself. The
trade-off, and most important thing to remember, about absolute
positioning is that these elements are removed from the flow of
elements on the page. An element with this type of positioning is not
affected by other elements and it doesn't affect other elements. This
is a serious thing to consider every time you use absolute
positioning. It's overuse or improper use can limit the flexibility of
your site.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Related
I'm making a pong clone using HTML/CSS/Js. I've set a div element to act as a border for the game, just to keep things in a confined space. How do I get elements (for example, a scoreboard) to act relative to their parent element? For example, if I tell the child to move 50% left, it moves to the center of the parent-div, and NOT to the center of the web-page. Basically I want the child confined by the dimensions of their parent (haha). It seems like
child-div {
position:relative;
}
in CSS would do the trick, but it's not...maybe it's because I'm developing in CodeAcademy's IDE?
position:relative means relative to itself not parents/children etc. It seems likely that you want relative on the parent and possibly absolute on the children. Without code, it's hard to help much further
Here's a quick demo for you.
.container {
width: 80%;
height: 250px;
margin: 0 auto;
position: relative;
border: 4px solid green;
}
.scoreboard {
width: 200px;
height: 50px;
background: lightblue;
border: 2px solid grey;
position: absolute;
top: 10px;
/* just for a bit of space */
left: 50%;
/*almost centered*/
margin-left: -100px;
/* half of known width */
}
<div class="container">
<div class="scoreboard"></div>
</div>
Note...there are other centering methods for absolutely positioned divs depending on whether the width is known and browser support requirements
left: 50%; does not center an element...it moves the element's top/left corner to the center of the containing element. You have to move it back half of it's width (if known)...see above.
One final point....positioned elements are not constrained to their ancestor elements but rather positioned in relation to them. It's quite common to have positioned elements outside the bounds of parents.
As you can see in this page: http://pitchfork.com/ , there are some audio elements on the right side. I've inspected them and they seem to have absolute positioning. But if you scroll down, you'll see that they are fixed.
How can achieve this behavior? Can be an element Absolute and Fixed positioned?
This is the only way I've found: like #DreamTek said:
<div id="relative-layer">
<div id="fixed-layer">
</div>
</div>
and in the styles file:
#relative-layer {
position:relative;
}
#fixed-layer {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
because using top and right rules positions the layer relative to the window, but if using margin-top and margin-left it is positioned relative to the parent layer.
JSFIDDLE: http://jsfiddle.net/9HQ4b/1/
Create a fixed scrolling sidebar with no JavaScript and a few lines of CSS.
The fixed div in the fiddle below appears to be positioned relative to the container but this is just an illusion.
It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width.
FLUID WIDTH
.wrap {
background: #ccc;
width: 90%;
height: 1000px;
}
.fixed {
position: fixed;
top: 10px;
right: 0;
background: #333;
height: 100px;
width: 10%;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
FIXED WIDTH
.wrap {
background: #ccc;
width: 200px;
height: 1000px;
margin: 0 auto;
}
.fixed {
position: fixed;
top: 20px;
right: 50%;
background: #333;
height: 100px;
width: 50px;
margin-right: -160px;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
A note about CSS positioning.
FIXED
Element is always positioned relative to the screen.
ABSOLUTE
Element is positioned relative to the nearest parent container with a position attribute.
Well, the inspected element IS absolute positioned, but is placed inside a wrapper (in another parent element) - #player-modal, which is fixed positioned!
The absolute position is used inside the fixed positioned parent, so the .hud element to be just a few pixels outside the content area (same spacing in every resolution!). This way the floating is fixed to the content area, instead of depending on the resolution (using fixed positioning + using the "right: 20px;" setting).
I just forgot to mention that it's possible, because the site has fixed width and not responsive layout, adjusting to every resolution. If you plan to use this efect on site with fixed width - it will work, otherwise you could need another solution.
I hope I've explained it well! :-)
You can also use calc() to achieve this. (supported in IE9+):
.fixed {
position: fixed;
right: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
or if you want your fixed div on the left, for instance:
.fixed {
position: fixed;
left: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
So I made JsFidle link and I'm troubled about relative and absolute positiong. So I made absolute div called top. I've got relative long (wide) blue panel with title that is positionend properly - top 0px. but when i'm making 2nd div in div id=top it has relative positioning top=70px (70 px is size of wide blue panel above). Sounds okey, right? But it isn't. I have no idea why It has so bad positoning . its relative to div="top" div, right? So why it moves so to bottom. Help please.
#top {
position: absolute;
top:0;
height:420px;
#panel {
margin:auto;
position:relative;
top:0px;
#panel-pic {
position: relative;
top: 70px;
height:350px;
background-color:black;
background-position: center;
background-size:cover;
box-shadow: 1px 1px 9px black;
}
panel-pic goes wrong!
I think you're mixing the two. :)
The parent should be relative and all elements you want to place relative-ly to it, should be absolute.
So just change #top's position to relative, and all others to absolute.
under #panel-pic p {
margin-top: 175px;
should be
margin-top: 0px;
working example: http://jsfiddle.net/gy3FU/7/
with css, can I put a div under another div without using absolute positioning?
I have these two divs, and I would like the solid white one to appear directly under the one with the yellow opacity (but not direct in the corner, at the corner of the outline).
How can this be accomplished. I've been experimenting with z-index and relative positioning, but to no avail.
Thanks
http://jsfiddle.net/loren_hibbard/WtGsv/
Without using positioning, I added a style to your content div using negative margins:
.content {
margin-top:-100px;
}
Working demo here: http://jsfiddle.net/WtGsv/3/
I suggest adding an id to your .fixed_width div which houses the .content div though, and using the id to give the negative margin to, that way the parent div has the negative margin, not the child div.
However if you want to use absolute positioning, I have updated your jsfiddle here:
http://jsfiddle.net/WtGsv/12/
Basically, you add a parent div with position:relative; around your other two divs that you want to use position:absolute;
I guess you should rewrite the markup, it is very simple, I don't know whether you are aware of this or not but you can pick up the div and place it in a relative positioned container, than you wont need negative margins
Demo
HTML
<div class="wrap">
Add a line item
<div class="inner_wrap"><textarea></textarea></div>
</div>
CSS
body {
background-color: #aaaaaa;
}
.wrap {
border: 4px dashed #ff0000;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
font-family: Arial;
position: relative;
}
.inner_wrap {
position: absolute;
width: 100%;
height: 100%;
background-color: #919191;
top: 0;
}
Yuu can use position: relative; top -100px, http://jsfiddle.net/WtGsv/1/
or you can use negative margins margin-top: -100px http://jsfiddle.net/WtGsv/5/
With both solutions, the div at the bottom still takes space where it would be originally
Note that adding a div dynamically doesn't preclude you from making it absolutely positioned, you just have to make the parent be positioned relative, and the dynamic absolutely positioned div will be inserted right where you want it http://jsfiddle.net/WtGsv/10/
You can place the div you want to be on top inside the div you want underneath, and position the one on top absolutely inside the parent.
Example HTML:
<div id="bottom">
lorem ipsum
<div id="top">
hello world
</div>
</div>
CSS:
#bottom {
background:red; /* to see dimensions */
position:relative;
}
#top {
background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Here is a JSfiddle.
If you put them both inside a parent div, and set that to have a width equal on the width of the yellow box, then by default the white one would be placed directly below.
I did this way
.mainUnderline{
height:8px;
background-color:yellow;
margin-top:-15px;
}
.header{
width:400px;
text-align:center;
font-weight:900;
font-size:30px;
color:black;
padding-bottom: 2%;
margin-left: auto;
margin-right: auto;
}
<div class="header">
“See line under me”
<div class="mainUnderline"></div>
</div>
I have a div which has a table which has a google map.
I want to place a info box within the google map external to the map, just floating on top
But I can't seem to get it right, the info div just pushes around the google map despite being on top of the map...
CSS
.google_map {
height: 270px;
width: 100%;
}
#flightMapInfo {
position: relative;
float: left;
z-index: 100;
color: #FFFFFF;
top: 30px;
left: 50px;
background:#5a85a5;
padding: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
div.tabContent {
border: 1px solid #c9c3ba;
padding: 0.5em;
background-color: #f1f0ee;
min-height: 300px;
}
.tableLeft {
width: 75%;
float: left;
border-right: dotted 2px black;
}
HTML
<div class="mapBlock tabContent">
<div id="flightMapInfo">WHARGL</div>
<table class="tableLeft">
<tr><td><div id="flightMap" class="google_map"></div>
</table></td></tr></div>
I wanted to comment on #scunliffe's answers, but this is rather lengthy.
Float says to browser, that rather than normal behaviour, divshould be either left or right and the rest of content should flow around (think: Images in *.doc).
Your problem is, that you confuse english 'float' [To remain suspended within or on the surface of a fluid without sinking] with css' 'float' [stay to 'left' or 'right' border and flow rest of website content around]
What you want to do is take the div out of normal flow of webpage (thus: position:absolute) position it.
Hint:
absolute is relative to 0;0 of first found ancestor, which is relative or absolute. Relativeis relative to 0;0 of what would be position in normal flow.
Relative divs* act as if they were on their original place , they are just rendered shifted. Absolute divs* are taken out of flow of website and position accordingly to hint above.
by div, I mean any styled tag
I apologize if you know all this and just can't make it work.
EDIT
In position:absolute; this means first found ancestor:
<body>
<div id="wrapper">
<div id="innerWrapper">
<div id="content">
and two CSS cases:
1.
#content { position: absolute; top: 10px; left: 20px; }
2.
#innerWrapper { positon: absolute; top: 200px; left: 200px; }
#content { position: absolute; top: 10px; left: 20px; }
In case one, since nether #wrapper nor #innerWrapper have set position, first absolute or relative ancestor in tree is body, thus positioning of 10px;20px is made from 0;0 of body (read: viewport) - #content is at 10;20 of window.
In case two, #innerWrapper is set absolute, thus making 200;200 of window a point, which is understood as 0;0 when positioning #content. Therefore (absolute ancestor found), content will be at 210;220 of window
Example: http://jsfiddle.net/3dq6V/
I think you are looking for position:absolute; not float:xxx.
Float just indicates that it will "flow" with the other elements on the screen... you want it to float above the other content and not be constrained by it, thus you want absolute positioning.