how to position a div element so that it shows at the top left corner, on top of all the content of the parent div, but at the same time its width does not extened more than its parents width?
Thanking you
Regarding the width, it depends how much content you have - can you set a static width on the element?
Regarding the positioning, you need to set
position:relative
on the parent, then add:
position:absolute;
top:0;
left:0;
on the child.
i am not sure...
if you position this item with:
position: absolute;
top: 0px;
left: 0px;
And the patent Div must have
overflow: hidden;
I found out a solution to it by myself. To make the child div appear on the top right corner of the parent div i set its position to absolute and top and left to 0. I solved the width problem by dynamically setting the child's width to the parent's width using jquery.
Note: the parent element's position should be set to relative for this to work on firefox.
Live preview: http://jsfiddle.net/PA6JZ/
#parent { position: relative; }
#child { position: absolute; top: 0; left: 0; }
<div id="parent">
<div id="child">Boom</div>
<p>Text here</p>
</div>
Related
I have 2 divs. The parent div has relative position and the child div has fixed position.
If I use a flat amount of width on the parent div, width: inherit; works perfectly.
When I use width: 100%; on the parent div, child div has more width than its parent.
*,
*::before,
*::after {
box-sizing: border-box;
}
.content {
position: relative;
background: black;
width: 100%;
}
.fixedElement {
position: fixed;
width: inherit;
background: yellow;
z-index: 2;
top: 0px;
}
<div class="content">
parent
<div class="fixedElement">
child
</div>
</div>
Fiddle
Am I missing something here?
I'm thinking of using jQuery to set the width of the child but I'm sure it's not a good solution as it could be solved only with css.
The body has a default margin. So the parent element will fill the entire width but will be limited due to that margin. The fixed element is not bound to the body and is the full width regardless of the margin.
However, it sticks out to the right of the parent because it is in the parent which has a position: relative. If you add a CSS rule like
body {
margin: 0;
}
parent and child will be the same size.
Because you are using position: fixed and top: 0 child div is overlapping your parent. If you need your child div be with position: fixed and you want to see the whole parent element, try to add also position: fixed to your parent and add some top value. This will show your parent elemtn under child element.
Or another solution could be is to change places for parent and child elements and use display: inline-block for both of them
if you want the child element to inherit the width of the parent then it should be position absolute rather than fixed.
I have divs (child) in a div (parent). The height from the parent is 144 to 318 (min-height and max-height). It depends on the size of the window.
I want every child in the parent to be vertically aligned. I tried it with line-height but since I don't have a fixed height, I can't find an answer.
Any suggestions how to do it?
HTML File:
<div id="mainDivPad">
<div id="ipadPad">
BILD
</div>
</div>
CSS File:
#mainDivPad{
position: relative;
width:100%;
height:100%;
min-height:144px;
max-height:318px;
background-color:#f9e2ef;
}
#ipadPad{
float: right;
margin-right: 7%;
}
edit:
The child has to "move" and get smaller oder taller when the window size is changed. (I know that the smaller and taller thing is another topic and should not be the problem here)
Use Line height for vertical alignment
line-height:inherit or line-height:parent dive hieght
You can do it by position it absolute:
#ipadPad {
margin-right: 7%;
margin-top: -10px;
position: absolute;
right: 0;
top: 50%;
}
The margin-top has to be the half height of the element #ipadPad.
Live Demo on JSFiddle
I have a site with an absolute positioned logo div on the top. It's parent is a relative div with 100% width.
I managed to get my position:absolute div where I want with next code:
css:
position:absolute;
top:0;
left:50%;
margin-left:-455px;
background:url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png');
width:206px;
height:99px;
z-index:999;
However I ran into problem: when the browser window width is less than the site width, the logo starts to move to the left side of screen.
My question:
How do I absolutely position my div related to the center of the site page, in other words I need my logo to be positiond X px away from the middle of the site...
The parent of the #headlogo element on your site is #wrapper and it is not relatively positioned.
You should therefore add
#wrapper{
position: relative;
}
Or put the #headlogo inside the #header element which is relatively positioned.
The reason that requires the above change (position: relative; in a wrapper element) is that absolute positioning will only function if the first parent element is NOT static (default). If it's anything other than static, it should function correctly!
You can do it easily with jQuery.
$(function()
{
var logo_width = width of your logo;
var window_width = $(window).width();
$('#id_of_your_logo').css('left', window_width / 2 - logo width / 2);
}
That should do fine :).
I took at the link of your site. One option is if you put your .headlogo inside the #header div instead (as below):
<div id="header">
<div class="headlogo"></div>
<!-- rest of the #header content here -->
</div>
...then change your css to:
position: absolute;
top: 0;
left: 0;
margin-left: 25px;
background: url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png');
width: 206px;
height: 99px;
z-index: 999;
Because your #header div as position:relative, any position:absolute div inside of it will be relative to it rather than the body. Therefore, when the window size reduces, it will still be relative to the header, not the body.
Whats the best way to position a div at multiple places on a page anchoring the div from the bottom left. It should be able to attach it to any element on the page, using that element as for relative positioning. Its for a tool tip. Each tool tip will have the same width, but depending on text in tooltip, that will determine the height.
you will use absolute positioning , the parent element that it is relative to will be positioned relative
when using absolute positioning to get the element outside of a relative parent use negative value for left and top
<div class="parent">
<div class="tooltip"></div>
</div>
.parent{ position: relative; /*set whatever else */}
.tooltip {position: relative; bottom: -20px; left: -20px; height 20px; width:20px;}
just an example of 20px X 20px tooltip that is positioned to the bottom and left of the parent
For some reason, I can't get this to work:
Website
(The red and green boxes will be removed once they're properly positioned.)
Thanks for the help.
The overall concept of centering something in css is quite simple. First you need a relative positioned container. The child element to be centered must have a fixed width and height and be absolute positioned at 50% from the top and 50% from the left, and both top and left margins must be negative half of the width and height respectively. In other words:
<div id="container">
<img src="" alt=""/>
<div class="box"></div>
</div>
.
#container { position: relative; }
img { dispaly: block; } /* It fills the container */
#box {
position: absolute;
width: 300px; /* Fixed */
height 150px; /* Fixed */
top: 50%;
left: 50%;
margin-top: -75px; /* 300/2 */
margin-left: -150px; /* 150/2 */
}
As suggested, you can do this with CSS positioning tho for what you appear to be trying to do, you might be better off using an image map
http://www.w3schools.com/tags/tag_map.asp
This allows you to set certain regions of an image as a link.
Try to set the following properties along with position
top:0;
left:0;
you can also set top or left property in order to make the boxes visible at the center
and if you want that your boxes will remain inside the center div then make the div with id splash to position: relative
it will help in solving your issue