I have an element in my Web Page <div class="col-md-12"></div>. Currently it is maintaining width of parent element. But if I apply position: fixed; on <div class="col-md-12"></div> it's width increases.
How to keep previous width with position: fixed; ?
set width to inherit so the child gets the width of the parent
width: inherit;
The CSS specification requires that position:fixed be anchored to the viewport, not the containing positioned element.
Other way to do it is :-
To set parent element position: relative; and child element position: absolute;
Related
I have a div which is positionned fixed at the top of the page. It's the only one that is fixed.
How to have the rest of the content start directly (and precisely) under this fixed div. I cannot know the height of the fixed div (textual content mixed with images).
For the moment, I have positionned the content approximatively under it by inserting <p>$nbsp;</p> tag but it's not an elegant solution.
Since you don't know the height of the fixed element I suggest you get the height with javascript and set the margin-top of the element under it to the same height as the fixed element.
HTML
<body onload="onPageLoad()">
<div id="fixed"></div>
<div id="under-fixed">
This is below the fixed element
</div>
</body>
CSS
#fixed {
position: fixed;
top: 0;
}
Javascript
function onPageLoad() {
//Get the height of the fixed element
height = document.getElementById('fixed').offsetHeight;
//Set the margintop of the element under the fixed one to the height of the
//fixed one
document.getElementById("under-fixed").style.marginTop = height+"px";
}
EDIT:
If you don't want to do this with javascript, you can make the fixed element a position: sticky;
Then you have to make sure the sticky element is a direct child to the body (or a direct child to a container stretching all the way down to the bottom of your page). That position sticky element will then stay at the top of the page and the content below the sticky element will stay below it (untill you scroll ofcourse).
CSS
.sticky-element {
position: sticky;
top: 0;
z-index: 999;
}
You can use absolute position -
<div class="fixed-div">I am a fixed div </div>
...
...
...
Rest of your elements...
apply the class as -
.fixed-div {
position: absolute;
top: 0;
left: 0;
}
So I'm trying to build a modal window (with a white background) with HTML/CSS and I want the modal window itself to be fixed positioned relative to the browser window. In addition, the modal contains a child img at the top and a child div at the bottom that will contain some description text in it. My purpose is to position the child div relative to the parent fixed modal window so that the child div has a left offset of about 8.33% of the width of the parent.
So initially I thought I should absolute position the child div, but once I do that the background of the parent modal windows does not extend to the child div:
here is the html/css for the above:
html:
<div class="modal col-4 l-offset-4" id="robot-modal">
<img src="media/robot_modal.jpg">
<div class="col-10 l-offset-1">
</div>
</div>
css:
.col-10 {
width: 83.33333%;
}
.l-offset-1 {
left: 8.33333%;
}
.modal {
#include align-vertically(fixed);
display: none;
z-index: 2000;
background: white;
img {
width: 100%;
}
div{
position: absolute;
background-color: blue;
height: 100px;
}
}
But when I change the child div's position to 'relative', then the correct background will show up:
I don't get the intuition why I should always relative position an element inside a fixed parent. Wouldn't positioning an element as relative make it impossible to adjust offset relative to its parent ? According to this article: http://www.webdevdoor.com/html-css/css-position-child-div-parent , if we want to position an element relative to its immediate parent, the parent better be absolute or relative positioned and the child must be absolute positioned. So in my case why does adjusting the offset of a relative positioned child also work? I don't want to assign a height to the parent modal. i want it to automatically enlarge itself when new elements are contained in it.
A parent does not take into account the size of the absolute child. According to MDN:
Absolute: Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block
If you put something after the absolute element, it goes on top, because the absolute element is no longer in the document flow.
You can do position: relative; left: 8.33%; right: 8.33%, or just leave it as static with margin: 0 8.33%;, or if you do absolute, you can set .modal { margin-bottom: [height of absolute DIV] }, if the height is set and won't change.
I am trying to have a header div inherit its width from its parent. The header div is position: fixed. The parent is contained inside a bootstrap container.
However, as you can see in the code I've created, it is not correctly inheriting the width of its parent - it is adding some extra width from somewhere.
This is all very annoying! Any idea how to fix this?
.category-body {
margin-left: 17% !important;
width: 67%;
background-color: red;
height: 500px;
}
.category-header {
position: fixed;
top: 51px;
width: inherit;
background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="category-body">We are in the category-body
<div class="category-header">We are in the category-header</div>
</div>
</div>
http://plnkr.co/edit/yVk15RqDqAac4H2eDJQe
The problem stems from using a percentage value on the parent width. Browsers seem to have a problem with this. (Tested on Chrome, FF & IE11.)
If you use pixel values the problem goes away.
Revise PLUNKR
From another answer:
It seems as though the static value (250px) can be propagated through
normal inheritance. Whereas when the relative value (90%) is being
used, the fixed div has already been taken out-of-flow, and now
inheritance-wise, it's parent is the viewport.
Learn more here:
position:fixed and width:inherit with percentage parent
How can I make a fixed positioned div inherit width of parent?
Set a Fixed div to 100% width of the parent container
Set width of a "Position: fixed" div relative to parent div
Set width of fixed positioned div relative to his parent having max-width
Fluid width fixed position
I'm new to CSS and I have a question.
First, my HTML and CSS code:
<!-- HTML CODE -->
<body>
<div id="container">Container
</div>
<div id="inner">Inner</div>
</body>
<!-- CSS CODE -->
#container {
background-color:#b6ff00;
width:500px;
height:500px;
position:relative;
}
#inner {
background-color:#ffd800;
}
With current code, the browser shows the following page:
This is expected.
But if I add this css property to #inner element position:absolute; there will be a following output:
As you can see, the #inner div, takes only that much space it needs. Why this changed with only position:absolute; property added to #inner div?
That's because when you use position: absolute; the element will take up width upto the elements defined/content it contains., cuz it just gets out of the document flow so it is block level in nature but won't take up entire horizontal space on the document, as it's just out of the flow of the document..
If you want it to be full width you need to define width: 100%; explicitly so that it will take 100% of the relative parent's width as well as the height if you declare height: 100%;
Also, make sure you always use position: absolute; with a wrapper element set to position: relative; or your element will fly out in the wild which will eventually end up taking the viewport as the last relative wrapper if you set the position of the element using top, right, bottom or left.
I've explained here in detail, that how CSS Positioning Works
Worth to note that, you make any element a position: absolute; element, it will behave as a block level element, but you need to define height and width so for example, if you turn an inline span element a position: absolute; you can define height and width without making it display: block; (Unless and until you are using display: none; initially)
position: absolute; does not behave the same as block elements.
You will need to set a width and a height for a div that is absolutely positioned.
This is fundamentally how position absolute works. Once taken out of the flow of the document it becomes an inline-block element that is absolutely positioned within the nearest element that is positioned relatively (or the top most element)
If you need it to then be a certain dimensions you can try to set widths and heights, or you can do things like
#inner {
position: absolute;
left: 0;
right: 0;
}
...which would ensure it always stuck to the left and right sides of the screen.
It's generally good practice to put things that are positioned absolutely inside of an element with "position:relative" on it, as your code stands it suggests you want your #inner element to be placed anywhere on the page, whereas if you wanted it to be of a size and position relative to #container your code should look like this:
<body>
<div id="container">
Container
<div id="inner">Inner</div>
</div>
</body>
with CSS such as:
#container {
position: relative;
}
#inner {
background-color:#ffd800; width:500px;
height:500px;
position:relative;
}
You can see your output here:-
http://jsfiddle.net/KggJd/
Let me explain a little:
Postition: relative
This will align itself in accordance with the elements found before (i.e) Prior Siblings.
You can change the position by using margin-top, margin-left, ....
Position: absolute
This will always consider from the browser's start point and won't be in accordance with anything.
Drawbacks:
You cannot consider this as the parent or anything when absolutely positioned.
You can change its position by using top, bottom, right, left.
I have a website with a gradient as background on the body. The .main div is absolutely positioned. I want it to have the same height as the content inside it, but how can I achieve that?
if the elements inside your absolute positioned div are positioned relative and have width and height you can apply this css to your .main div:
height:auto;
this will calculate the height depending on the height of all the content inside
Definitely do not have your main/container/wrapper div be absolutely positioned. Have it be positioned relatively.
<div class = "main">
<div class = "content">....</div>
</div>
Then you have your CSS:
.main {
position: relative;
margin: 0 auto;
}
.content {
height: 100%;
}
Look at this jFiddle: http://jsfiddle.net/persianturtle/3eJGr/
A great article on what absolute positioning really does can be found here
A segment:
Absolutely positioned elements are removed entirely from the document
flow. That means they have no effect at all on their parent element or
on the elements that occur after them in the source code. An
absolutely positioned element will therefore overlap other content
unless you take action to prevent it.