I'm trying to place a div with id 'absPos' in absolute position in relation to its parent div. But it is not working, the div is placed at the top left corner of the page.
My code sample is as follows
<html>
<body>
<div style="padding-left: 50px;">
<div style="height: 100px">
Some contents
<div>
<div style="height: 80px; padding-left: 20px;">
<div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
Some text
</div>
</div>
</body>
</html>
Can you help me to solve this issue.
In my actual case instead of the red background color I've to place a background image.
Regards
Elements with absolute positioning are positioned from their offsetParent, the nearest ancestor that is also positioned. In your code, none of the ancestors are "positioned" elements, so the div is offset from body element, which is the offsetParent.
The solution is to apply position:relative to the parent div, which forces it to become a positioned element and the child's offsetParent.
<html>
<body>
<div style="padding-left: 50px;">
<div style="height: 100px">
Some contents
<div>
<div style="height: 80px; padding-left: 20px; position: relative;">
<div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
Some text
</div>
</div>
</body>
</html>
If you are placing an element with absolute position, you need the base element to have a position value other than the default value.
In your case if you change the position value of the parent div to 'relative' you can fix the issue.
You need to declare the parent div either position: relative or position: absolute itself.
relative is what you're looking for in this case.
You need to give parent div relative position first:
<div style="height: 80px; padding-left: 20px; position:relative;">
You can also Apply Position:absolute to the Parent Div. Total Code below
<html>
<body>
<div style="padding-left: 50px;">
<div style="height: 100px">
Some contents
<div>
<div style="height: 80px;position:absolute; padding-left: 20px;">
<div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
Some text
</div>
</div>
</body>
</html>
If, like me, you were trying to position an element over another element, the floating element needs to be inside of the other, not as siblings. Now your position:absolute; can work!
Related
I have a scrollable container - a div with overflow-y: scroll and position: relative.
I have a div inside it.
I have a second div, underneath the first, with position: absolute.
I would like the second div to extend beyond the bottom of the container div, but instead it increases the container's size.
If I remove the container's position: relative, then the second div does extend beyond the container, but it's positioned too far below (at the spot where it would have been positioned if there were no scrollbar).
I thought to give the second div position: fixed, but it's a problem, because the entire page may have a scrollbar, and when scrolled - I would like the second div to move together with its container.
The code:
<!-- container -->
<div style="position: relative; overflow-y: scroll; width: 400px; height: 400px; background-color: pink;">
<!-- first div -->
<div style="width: 20px; height: 800px; background-color: grey;">
</div>
<!-- second div -->
<div style="display: block; position: absolute; width: 100px; height: 200px; background-color: red;">
</div>
</div>
JSFiddle: https://jsfiddle.net/x341yvdn/
I prefer a CSS-only solution, but if it's not possible - then Javascript is also acceptable (vanilla or JQuery are both fine).
This might be what you're looking for
<html>
<body>
<!-- container -->
<div style="overflow-y: scroll; width: 400px; height: 400px; background-color: pink;">
<!-- first div -->
<div style="width: 20px; height: 800px; background-color: grey;">
</div>
<!-- second div -->
<div style="display: block; position: absolute; width: 100px; height: 200px; background-color: red; top:400px;">
</div>
</div>
</body>
</html>
Say I wanted an element to be positioned vertically absolutely, but horizontally relative. Is this possible with css/html/javascript?
Not sure which case could be fine to use this mix, but it is possible,
if you only define top/bottom properties in a position:absolute element.
The left/right position of the element will be "relative" if you leave it untouched.
In the following example, the second container has a mixed positioning.
.example{
margin: 30px;
position: relative;
border: 1px solid red;
}
.item1, .item2{
display: inline-block;
margin: 0;
}
#example2 .item2{
position: absolute;
top: 80px;
}
<div id="example1" class="example">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
</div>
<div id="example2" class="example">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
</div>
Note: I am unable to edit the HTML, so I have to find a workaround.
HTML:
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">...</div>
<div id="rightColWrapper" class="rightColumn663Wrapper">...</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
The issue is that all of the divs inside #container, EXCEPT for #leftColWrapper and #rightColWrapper, need to be 100% width of #container, but #leftColWrapper and #rightColWrapper need to be stacked next to each other and centered (together) within the 100% #container, with a max-width of 1224px.
I tried utilizing the following jQuery to add a wrapper div around #left... and #right..., but it ended up grabbing the ads in those containers and placing them in the component where the JS for the page is stored.
(function($) {
$("#leftColWrapper, #rightColWrapper").wrapAll("<div class=\"colWrapper\" />");
})(jQuery);
I either need another solution to wrap those two divs together, so that I can set a max-width of 1224px and center them, or I need to know why this jQuery is picking up those ads and duplicating them within the JS component.
#container{
text-align: center;
font-size: 0;
}
#container > div{
outline: 1px solid #333;
display: inline-block;
min-height: 10px;
text-align: left;
width: 100%;
font-size: 14px;
}
#container #leftColWrapper, #container #rightColWrapper{
width: 50%;
max-width: 612px;
}
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">width: 50%;<br>
max-width: 612px;</div><div id="rightColWrapper" class="rightColumn663Wrapper">width: 50%;<br>
max-width: 612px;</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
I am continuously drawing some lines in my canvas using kinetic.js and I want a div-text to appear on top of this canvas. Using relative and absolute trick I can place a div in the middle of my canvas but the problem is as I am continuously drawing lines, these lines are being drawn on top of my div-texts which I dont want to happen!
Basic template:
<div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;">
greatTexts
</div>
<div id="container" style="position: relative; width: 100%; height: 100%;">
<canvas></canvas>
</div>
I believe you could also just set a z-index value on both #container and #div-text.
Like this:
<div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;z-index:999;">
greatTexts
</div>
<div id="container" style="position: relative; width: 100%; height: 100%;z-index:990;">
<canvas id="myCanvas" height="500" width="500"></canvas>
</div>
This shows an example.
A canvas if by default empty, meaning you can see elements behind it.
Since you placed your <div> before the <canvas>, in the code, the <div> is rendered under the <canvas>.
Solution? Switch the divs around a little:
<div>
<canvas style="position:absolute; width:100%; height:100%; background:red"></canvas>
<div id="div-text" style="background-color:#00baba; position:absolute; margin-top:50%; margin-left:50%;">
greatTexts
</div>
</div>
Just place the div with text after the container div like this
<div id="container" style="position: relative; width: 100%; height: 100%;">
<div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;">
greatTexts
</div>
There's no need to create a canvas element, because as you've mentioned, KineticJS automatically creates those for you.
I have the following code:
<div xmlns="http://www.w3.org/1999/xhtml"
style="z-index: 1; position: absolute; top: 90px; left: 90px; background: none repeat scroll 0% 0% black; width: 800px;"
id="mainDiv">
<div style="width: 405px;" class="floatLeft" id="mainDiv3">
<div style="width: 100%;" id="mainDiv31">
<div style="width: 107px; height: 100%;" class="floatLeft"
id="mainDiv313"></div>
<div
style="width: 2px; height: inherit; background-color: white; cursor: default;"
class="floatLeft" id="mainDiv31_vertical"></div>
<div style="width: 296px; height: 100%;" class="floatLeft"
id="mainDiv314"></div>
</div>
<div
style="height: 2px; width: 100%; background-color: white; cursor: default;"
id="mainDiv3_hotizontal"></div>
<div style="height: 311px; width: 100%;" id="mainDiv32"></div>
</div>
<div
style="width: 2px; height: inherit; background-color: white; cursor: default;"
class="floatLeft" id="mainDiv_vertical"></div>
<div style="width: 393px;" class="floatLeft" id="mainDiv4">
<div style="height: 456px; width: 100%;" id="mainDiv41"></div>
<div
style="height: 2px; width: 100%; background-color: white; cursor: default;"
id="mainDiv4_hotizontal"></div>
<div style="height: 142px; width: 100%;" id="mainDiv42"></div>
</div>
</div>
Now I want to change the height of all elements with id's ending with _vertical to be automatically set to its parent height, I mean it should get resized automatically in case its parent's div's height increses that increase will be due to addition on some more elements to its botherly div.
For example:
On adding some stuff to mainDiv313 will increase its parent height i.e. mainDiv31 height which in turn should increase mainDiv31_vertical
What should be assigned to height of mainDiv31_vertical so that it exhibits this behavior. i would prefer not changing it by JS or Jquery as it increases processing...
Already set it to inherit as it will make it inherit the height from parent.
Please suggest something.
EDIT
i want something like
div1 -->div11
>div1_vertical
>div12
this means div1 has these 3 other div in it on change div11 height div1_verticalheight should change automatically without some js or jquery i want some css property
i haven' mentioned any height on div1 so it automatically adjusts it children
You can do this with jQuery:
$("div[id$='_vertical']").height(function(){
return $(this).parent().height();
});
But dear lord, you shouldn't. IDs should be unique and semantic, not descriptive of a property. That's what classes are for. Use a class="vertical" instead
To set all div elements with an id that ends with _vertical, this should do the trick:
$("div[id$='_vertical']").height(function(){
return $(this).parent().height();
});
However, it is not possible to do this automatically when the parent height is changed because there are no events to bind to when it comes to DOM manipulation and mutation.
I also agree with Roland that you shouldn't have _vertical in your id, but rather as a separate class.
Here's an example using CSS with relative/absolute positioning that might work for you.
CSS
div.vertical {
position: relative;
}
div.vertical div {
position: absolute;
top: 0;
bottom: 0;
}
HTML
<div id="mainDiv31" class="vertical">
<div id="mainDiv313"></div>
</div>