im working on some graphic representation of journal issues. What I need is to display block of text using simple DIVs (or else) inside of other DIV, exactly the way they are organized on issue page. To do that I need to set coordinates of DIV element to exact number, but in relation to parent DIV. Is there any way to do that by using css or js??
If you outer div is set to position: relative, you can have the inside div as position: absolute and set its top, left, right and bottom properties to the pixels you need. For example.
.outer {
position: relative;
}
.inner {
position: absolute;
top: 10px; //your coordinate
left: 5px; //your coordinate
}
<div class="outer">
<div class="inner">Your content</div>
</div>
Otherwise, you can simply use padding on the inner element.
If you want the div to be display: block;, you can use simple margin-top and margin-left to set coordinates.
Lets say (for example) you need to set the coordinates of the div as <100,50>:
To do that, in CSS, set margin-left: 100px and margin-top: 50px
Related
I saw this example from w3schools.com. The website says that
The container element should be created with style = "position: relative".
The animation element should be created with style = "position: absolute".
I don't understand why this is the case. Could someone please kindly explain it to me.
<!Doctype html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<body>
<h1>My First JavaScript Animation</h1>
<div id="container">
<div id="animate"></div>
</div>
</body>
</html>
By setting position: absolute on an element it is removed from the documents' normal rendering flow and it is rendered exactly where you tell it. Any positioning rule you set on this element (left, right, top, bottom) will be calculated using as reference the closest ancestor with position:relative if any is set or the body element.
If you need to broaden your understanding of CSS positioning fast, I recommend this tutorial.
The whole point of position: absolute is to position it BASED on the parent element.
The only way this can be achieved is through the use of position: relative on the parent element.
Since the default position-value is position: static the absolutely positioned element can not be based on that.
If there is no parent element with a position: relative the position: absolute element will position itself according to the html.
Here's a great post about the different position values on CSS-Tricks:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Quote from the css-tricks post on position: relative:
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 <html> element itself meaning it will be placed relatively to the page itself.
I've got a <div id="mydiv"> with margin-left: 0px.
But sometimes (the page is dynamically generated) that this <div> is placed within another <div> that has a positive margin-left value.
This way #mydiv will have the margin of the container and not 0.
Is there a way to set
margin-left: 0px (relative to the body margin)
or
margin-left: -(sum of container margins)?
If your div is inside another one, the boundaries for that div are limited to it's container div.
You can break out of it by putting position: absolute; on the div you want to position differently. Then you should put a position: relative; on the container it should be relatively positioned to. Then you can use a negative margin-left.
use:
.mydiv{
position: absolute;
left : 0;
}
By using an absolute position and setting left to 0 your div will always be aligned with the left side of the containing element with no margin.
Use CSS positioning property and align the div's respectively.
For Example
You have a <div class="wrapper"> style this with position:relative
And for the inside <div class="mydiv"> style with position: absolute; left: 0; or left: 50%.
The main point is positioning:
position: fixed; will position the div relative to the browser window
position: relative; will position it relative to its normal position
position: absolute; will position it relative to the first parent element that has a position other than static (so it is not really absolute after all)
check http://www.w3schools.com/css/css_positioning.asp
You can achieve it with positions like relative and absolute.
You just need one top parent above all div.
I have created following example. It will help you to achieve what you need.
[Example](http://jsfiddle.net/dhavalsolanki/tjv5e1tn/)
I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?
You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.
It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.
Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.
See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}
You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.
If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.
I have a <input /> field and an <a><img /></a> icon which I want to put inside the input.
Of course I can't put an image inside of the input since it's not that kind of tag, but I'd be happy with it just overlapping.
If I use position: relative (which makes positioning it correctly easy) the icon continues to take up invisible space where it would have been.
If I use position: absolute I cannot position the icon relative to its previous sibling, the positioning values are in relation to the parent, which is not great because different browsers render the <input> with different sizes.
Is there a workaround for this?
http://jsfiddle.net/iambriansreed/u7DUv/
Wrap the input and a in a wrapper and absolutely position the a off the relatively positioned div wrapper.
CSS
input {
font-size: 24px;
width: 200px;
}
div {
position: relative;
width: 200px;
}
div a {
display: block;
position: absolute;
top: 4px;
right: 0;
z-index:99;
}
I think I know what to do now. I make a <span> where my icon was, it will have position:relative with no offset and it will contain the icon with position:absolute. This way the absolute offset from the span is effectively the relative offset wrt the page.
Use position:relative, and use padding-left as amount of image's width in input tag, there will not be hidden space.
Just use a negative margin-left on the image element to let it show up above the input.
I have a div inside a div inside a div ... By default each comtainer moves elements more and more to the right.
I have a elements "div.leftPanel" that can be nested very deeply in but I want it to be 50px (for args sake) to the left of the document (where the body's left property would be) and not it's parent element. Some of it's containers need to have a position of absolute or relative.
Is there any way to do this with css? if not then javascript?
You could use a negative margin to achieve this if you already know how far the nested div has been pushed out from the left of the body. Example:
<div style="position:absolute; left: 30px;">
<div style="position:absolute; left: 30px;">
<div style="position: relative; margin-left: -10px;">
</div>
</div>
</div>
If it isn't set, you can always find out how far from using javascript and apply the margin dynamically.
If you apply position: absolute; and left: 50px; to div.leftPanel, and none of its parent elements have any position (absolute or relative), then the 50px will be calculated from the left edge of the document.
EDIT: Sorry, I missed the sentence where you said some of the parents had to have a position. Can you just move div.leftPanel out of the other <div>s entirely? Maybe just place it at the root of the document so its position will be calculated from the edge of the document.