Is there any way to start drawing divs from the same point? That means if I add new div and then I add another div, they will appear above each other. Because I want to move them all together depending on the same point.
CSS:
#num1,#num2{
display : inline
position:relative;
left:50px;
}
HTML:
<div id='container'>
<div id='num1'></div>
<div id='num2'></div>
</div>
So what should I add to this code so when the browser render this code the 2 divs will be on the same place?
All statements regarding absolute positioning are correct. People failed to mention, however, that you need position: relative on the parent container.
#container {
position: relative;
}
#num1,
#num2 {
position: absolute;
left: 50px;
}
<div id='container'>
<div id='num1'>1</div>
<div id='num2'>2</div>
</div>
Depending on which element you want on top, you can apply z-indexes to your absolutely positioned divs. A higher z-index gives the element more importance, placing it on the top of the other elements:
#container {
position: relative;
}
#num1,
#num2 {
position: absolute;
left: 50px;
}
/* num2 will be on top of num1 */
#num1 {
z-index: 1;
}
#num2 {
z-index: 2;
}
<div id='container'>
<div id='num1'>1</div>
<div id='num2'>2</div>
</div>
Use z-index to position divs on top of one another:
[http://www.w3schools.com/Css/pr_pos_z-index.asp][1]
So, you'll position the divs with absolute/relative positioning and then use z-index to layer them:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Make the first one position:absolute, which should take it out of the normal flow of the page.
some help.
I believe the only way to do this is to use absolute positioning
You can use absolute positioning.
#num1,#num2{ display : inline position:absolute; left:50px;top:10px; }
Related
Normally a div gets displayed after the previous one (like to the right of it, to the down of it or wherever depending on the context and the styles set to them). I need a div to get displayed over (in terms of Z-order) the previous like if it was not there. What styles should I set to the background and the foreground divs to make them to behave so?
You need to use absolute positioning on the div elements.
Given the following HTML
<div class="container">
<div class="first-div"></div>
<div class="second-div"></div>
</div>
You'd use the following CSS
.container {
position: relative;
}
.first-div,
.second-div {
position: absolute;
top: 0;
left: 0;
}
Here's a demo with color. I've offset the second-div by 5 pixels in both directions in order to show that they are layered.
You can use the following HTML structure:
<div class="outer">
<!-- Content of outer div here -->
<div class="inner">
<!-- Content of inner div here -->
</div>
</div>
And apply this CSS:
.outer {
position: relative;
}
.inner {
position: absolute;
/**
* change this and other CSS properties like left, right
* to position the inner div relative to the outer div
*/
top: 0px;
}
Just a position:absolute; added to the css of required elements will do.
I'm thinking this isn't possible, but I'm not a CSS expert, so I thought I'd check. I've got a translucent div absolutely positioned over an image. That's good so far, but I'd like to force my translucent div to respect the box in which it and the image are contained.
<div class="parent">
<div class="title-bar"> /* prolly not important */
<h2>Title</h2>
</div>
<img src="whatever"/>
<div class="overlay">
A few lines of txt
</div>
</div>
The more I think about it, the more I think I may be asking for too much - I want the parent to expand with the img, but the overlay to be constrained by the parent. Can this be done?
To force the container expand with the child img, make it float.
To force the overlay relate to container position and size, make the container relative.
.parent {
float: left;
position: relative;
}
To force the overlay respect the bounds of the container, use percents.
.overlay {
position: absolute;
max-width: 100%;
/* And then, position it at will */
top: 0;
left: 0;
}
I've prepared an example: http://jsfiddle.net/rYnVL/
It's doable, but not quite beautiful :
<div id="parent">
<div id="abs">stuff fadsfasd fsad fasdsdaf </div>
<img src="/img/logo.png" />
</div>
#parent {width:auto; height:auto; border:1px solid blue; background-color:grey;position:relative; display:block;float:left;}
#abs {position:absolute;width:100%;height:100%;background:#ff0000;opacity:0.4;}
Main point to note :
parent floats to not have a 100% width. Position is relative.
abs is absolute, with 100% size.
also, if abs content is bigger than the image, it will overflow. If you do not like this, just add overflow:hidden.
I'm having problems working out the z-index order for an application we're working on, i have two root parents, a nav bar and a map, and one child, the map tooltip. The navbar should be visible above the map, so it has a higher z-index, but the problems is to make the tooltip in the map container to be displayed over the sidebar as well, a bit hard to explain, so you can visualize the case on http://jsbin.com/afakak/2/edit#javascript,html,live :
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
Thanks for any help.
If #map-container is positioned (i.e. not static), this is not possible, because of the way z-index is compared:
body (or any other positioned parent element) is the reference for both #map-container and #nav-bar. Any z-index you give them is calculated in respect to the parent element. So the one of the 2 elements with the higher z-index will be rendered above the other one and all its child elements. Z-index of #tooltip will only be compared with other children of #map-container.
You could do as Nacho said and statically position #map-container. You can simulate fixed positioning via Javascript, if you like.
If you cannot do that, you need to change your markup, so that #nav-bar and #tooltip have a common positioned parent element. Either move #nav-bar inside #map-container, or #tooltip out of it.
Below solution should work but I don't know if you have a requirement like keeping nav-bar outside map-container. If so I don't think that there is a workaround for that.
CSS:
#tooltip-helper{
position:relative;
/*below properties are to demonstrate the helper*/
width:10px;
height:10px;
background-color:green;
top:200px;
left:200px;
}
#tooltip
{
position:absolute;
top:10px;/*this is just to make sure helper is visible*/
left:-100px;/*this is to center the tooltip*/
width: 200px;
height: 200px;
background-color: yellow;
color: black;
padding: 10px;
z-index: 15;
}
HTML:
<div id="map-container">
<div id="nav-bar">
The nav bar
</div>
This is the map container
<div id="tooltip-helper">
<div id="tooltip">This is the Tooltip</div>
</div>
</div>
You have to absolutely position nav-bar and tooltip (otherwise z-index won't be taken in account), and maintain map-container static positioned
#map-container{
...
position: static;
...
}
#nav-bar{
...
position: absolute;
}
#tooltip{
...
position: absolute
}
I think the only way you can do this with a position: fixed on the #map-container is to restructure your tool tips to display outside the #map-container. So on click of the icon "inside" the map container, the tool-tip itself is displayed above both (with a proper z-index set).
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
</div>
<div id="tooltip">
This is the Tooltip
</div>
After going through, your codes, i noticed this.
#tooltip{
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
}
Your #tooltip has a z-index, but it's not positioned. Z-index property will only work if it's has one of the position property value. And considering you want the tooltip to stand out, you should use the absolute position value like this.
#tooltip{
position: absolute;
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
}
HTML
<div id="map-container">
<div id="nav-bar">
The nav bar
</div>
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
This keeps the #tooltip on top....
For future readers with similar problems -
If your conflicting child items are position: fixed, consider setting the height of the parent containers to 0px, and then shifting any parent background display settings onto a mutual grandparent of the conflicting children.
This solved my analogous delimma.
If, in the real page, the tooltip has to be shown only on hovering the map container, you could just change dynamically its z-index like so:
#map-container:hover
{
z-index: 16
}
Otherwise you need to change the position of the tooltip so that the nav-bar doesn't overlap it.
I want to attach a sticky element(containing social media icons) to the right of my main wrapper which has a width of 960px and not stuck to the right side of the screen.
Any simple CSS ways of doing this?
Thanks
div#wrapper {
position: relative;
}
div#socialmediaicons {
position: absolute;
top: 0;
right: 0;
}
<div id="wrapper">
<div id="socialmediaicons"> ... </div>
</div>
"Absolutely" positioned elements will be positioned with respect to the closest parent element that is itself positioned.
There is a good jQuery plugin for this very need:
http://plugins.jquery.com/project/stickyfloat
Tt gives you powers beyond mere CSS.
I want to position "Game on Sep 27" in the lower left-hand corner, across from "Lost 100 chips." But I can't see to get it positioned in the lower left-hand side.
Here's my current CSS:
Any suggestions? Much appreciated!
The easiest way would be to put all three divs (.recentEventsDetail, .recentEventsLowerLeftElement, .recentEventsLowerRightElement) inside a wrapping div with position: relative;. Then you can make lower divs position: absolute; and set placement that way. for example:
<style type="text/css">
.reventEventsWrapper {position: relative;}
.recentEventsLowerLeftElement {position: absolute; bottom: 0px; left: 0px;}
.recentEventsLowerRightElement {position: absolute; bottom: 0px; right: 0px;}
</style>
<div class="reventEventsWrapper">
<div class="recentEventsDetail"></div>
<div class="recentEventsLowerLeftElement"></div>
<div class="recentEventsLowerRightElement"></div>
</div>
Using position relative on the wrapper makes the absolutely positioned children use the origin of that div to calculate position. The only issue here is that you could potentially have overlap. Also youll probably want to add padding-bottom to your wrapper equal to the the height of the left and right divs. this makes sure they never overlap the detail div.
What css do you currently have for .recentEventsLowerLeftElement and .recentEventsLowerRightElement?
To make sure that they are cleared to the next line, I would do something like the following:
<div class="recentEventsLowerElement">
<div class="recentEventsLowerLeftElement">
</div>
<div class="recentEventsLowerRightElement">
</div>
</div><!-- end .recentEventsLowerElement -->
.recentEventsLowerElement { clear: both; }
.recentEventsLowerElement
.recentEventsLowerLeftElement {
float: left; }
.recentEventsLowerELement
.recentEventsLowerRightElement {
float: right; }