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.
Related
I know how to make an element scrollable (inner element absolute and parent relative), but what if I want the whole scrollable element to be positioned as absolute? (to move it around a parent div and overlap something underneath). Am i correct to assume it's not possible? Is there a way to do it via javascript?
I already tried to wrap the relative parent into an absolutely positioned grandparent but obviously it doesn't work :/
Ok I actually solved it by moving the scrollable element into a component (I'm working in React), importing it into the main component, and then I set the position of the component to absolute. However, I'm still interested in knowing if other people have other solutions
Can you just add an overflow on the absolute positioned item?
Something like this?
https://codepen.io/Daggett/pen/abqZgLa
CSS
section {
width: 100v;
height: 100vh;
background-color: blue;
postion: relative
}
article {
width: 20rem;
height: 20rem;
padding: 2rem;
background-color: red;
overflow: scroll;
position: absolute;
top: 2rem;
left: 2rem;
}
div {
width: 100%;
height: 50rem;
background-color: green
}
HTML
<section>
<article>
<div></div>
</article>
</section>
In the given code, in div.text section when I assign position: absolute then the display: block property becomes inactive and I have to set width: 100% to align the text in the center. What's the reason?
Why do I have to first set the position property to relative of the container in order to set the position of the child element to absolute? If I don't set the position: relative of the parent container then the element is positioned with respect to the body tag. Why?
body,
html {
height: 100%;
margin: 0;
}
div.first-div {
background-image: url(louis-lo-275893-unsplash.jpg);
height: 100%;
opacity: 0.7;
background-size: cover;
position: relative;
}
div.text {
position: absolute;
top: 45%;
left: 0;
display: block;
width: 100%;
text-align: center;
}
span.border {
color: cornsilk;
font-family: "Lato", sans-serif;
letter-spacing: 8px;
font-size: 50px;
background-color: black;
padding: 8px 30px;
height: 100px;
}
<body>
<div class="first-div">
<div class="text">
<span class="border">Hello</span>
</div>
</div>
</body>
Why do I have to first set the position property...
The default value of the position is static, which displays elements as they appear, or in other words: not positioned. Absolute positioning will place an element relative to its first positioned (not static) ancestor element. If nothing is positioned, the <body> or topmost element is it. That's where the need for setting parent position to relative comes from. Going from static to relative makes it "positioned" and now child object with absolute position will tie to its ancestor and not <body>. from https://www.w3schools.com/cssref/pr_class_position.asp
...I have to set width: 100% to align the text in the center. What's the reason?
When you remove position: absolute style from div.text it does not affect display:block (block, as opposed to inline, means the element doesn't "like" being next to other elements) <div>s or divisions are block elements and <span>s are inline. So setting display:block on any <div> is redundant. Setting the width to 100% makes the <div> occupy the entire line instead of a default: as little space as necessary. Not specifying width doesn't cancel text centering, it's just centered inside the <div> that fits perfectly.
1.The reason behind given width in absolute position is the default position of absolute and relative is left,top so we have to specify the width to perform any center alignment action. also no need to give display block property to the class, it's by default block, if your are performing some toggle action then you have to apply that property to any css.
When ever we are applying absolute position to child div it is necessary to assign the relative position to the parent, because of doing this we are restrict the are for absolute position action, if we are not applying position relative property to the parent, child css have some top, bottom, left, right property then it will show some where in body of html.
For better understanding of css position property please follow the attached link to understand the nature of position property.
enter link description here
I am trying to align (and stack) some images inside a bootstrap grid.
For some reason, the images aligns to the window and not the grid.
I use position:absolute which work like this (http://www.w3schools.com/):
"An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>"
Here is a jsfiddle :
http://jsfiddle.net/sbE6t/
.rings img {
position:absolute;
top: 0px;
left: 0px;
}
As you quoted, they will be absolutely positioned to the next non-static element. If no such element is found, the containing block is <html>.
Set position relative to the img's parent:
.rings {
// other styles
position: relative;
}
And it works
your wrapping element must be set to position:relative
.rings {
overfow:hidden;
height: 400px;
background: #999;
position:relative;
}
See this Fiddle, how can I center the blue div without fixed width and height in the parent and child?
This is to post in SO
<div class="parent">
<div class="child">
</div>
</div>
Update
These are positioned elements, I want child at the center of the screen.
Update 2
See it centered here, but I can't use fixed widths nor heights in parent neither children. I need positioned elements because I need them to be over other elements.
To center a div, you simply have to add this attribute:
margin-left: auto;
margin-right: auto;
or a more condensed version (assuming 0px for the top and bottom margin):
margin: 0px auto;
This assumes that you have some sort of width value on that element you want to center, whether fixed or a percentage. You shouldn't need anything in the parent to dictate the child's margins.
margin-top: -50%; /* why this takes the width of the parent ???? */
It's because your parent div has position: fixed and your child div has position: absolute and since absolute position element is positioned relative to the first parent element that has a position other than static.
So your child div will take a margin top and margin left with a value equal to -50% of your parent width which is -50% * 150 = 75px
Try this it's display in center of width.
<div class="parent">
<div class="child">
</div>
</div>
<style type="text/css">
.parent{
}
.child{
background: none repeat scroll 0 0 lightblue;
height: 50px;
margin: 0 auto;
width: 150px;
}
</style>
I think this could solve your problem, but this needs JQuery[.width()].
.parent{
position: fixed;
/* I can't use static width nor height, TO DELETE(try changing this)*/
width: 500px;
height: 400px;
background: red;
}
.child{
display: inline-block;
position: absolute;
/*Simulate width and height, these are actually calculated by content*/
width: 100px;
height:50px;
background: lightblue;
}
JQuery onLoad:[JSFiddle]
$(function changePostion() {
var s = $(".parent").width();
var e = $(".child").width();
var d= (s-e)/2;
$(".child").css({"left":d});
var sh = $(".parent").height();
var eh = $(".child").height();
var dh= (sh-eh)/2;
$(".child").css({"top":dh});
});
This article is a best tutorial for positioning html attribute in center. There might be a better way to do without using JQuery.
Dynamic modals can be the biggest pains in the world. You need JS to change the heights and widths. Can you use a plugin? If so here are some good options. Twitter bootstrap has a modal that's very easy to get set up but it's challenging to load divs via ajax and iframes. You have to choose one or the other. simplemodal (http://www.ericmmartin.com/projects/simplemodal/) is good but you still need to do a lot of the work yourself. It works with iframes and ajax content.
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>