I have a position: fixed element. It has some top and left properties but it was not visible in the screen. After some debugging I found that it was positioned way off than it should be. So I set top: 0 and left: 0 and now that element was where I wanted it to be (near middle bottom) instead of being in the top-left of the screen as it should be.
Why is this happening? One thing is that it's parent container also has position fixed. I'll have a snippet below
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
<div class="container">
<div class="child">Test</div>
</div>
The reason there is a fixed component inside another fixed is that one is container and the other is kind of a tooltip so it has to be that way.
left and top properties should have some units associated with it, e.g. pixels. Try the following:
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
Got the answer. It's a bug in chrome where a child with fixed position doesn't work if any parent has transform: translate css.
Duplicate of this question
Related
I have a problem with some CSS ,maybe someone can help me out .
I dont see any margin or padding there that will be the problem.Only that the height is to big or something.
I am using wordpress Sydney theme.
This is the website.
How can i get the space out between the banner and the content of the page ?
Here is a screenshot of what i mean.
Thank You.
#sf-slider-overlay {
position: absolute;
top: 230 px;
z - index: 999;
width: 1170 px;
margin - left: auto;
margin - right: auto;
}
you only have to do this..
Position : absolute
Will work ☺
There is one element (#sf-slider-overlay) with wrong position.
#sf-slider-overlay {
position: relative;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
Change it to,
#sf-slider-overlay {
position: absolute;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
So Simple just add below code to custom css style of your theme
#sf-slider-overlay {
position: absolute;
}
Your problem will be solved or put above code in your page css.
That's because the space isn't caused by any margin or padding. The space is caused by an element that has been moved out of the way using position relative.
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: relative;
top: 230px;
width: 1170px;
z-index: 999;
}
If you change this to have a position:absolute; it fixes the extra space that you had.
Like this:
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 230px;
width: 1170px;
z-index: 999;
}
You may have to fiddle with the positioning slightly to get it right, I noticed that once absolute has been set, the word "Domestic" sits right on the edge of the screen, so perhaps add a left:2em; to the property, or even padding-left:2em;
You are using position: relative; in the element #sf-slider-overlay. position: relative; takes an element out of the float, but the space remains there.
You can use position: absolute; but have to set the left property to get the same result as now:
#sf-slider-overlay {
position: absolute;
left: 50%;
translate: translateX(-50%);
}
I've got a fixed container which is vertically and horizontally centred on the page, and an element within that container. Ideally I would like to have this element positioned in the very top left of the window, however I'm struggling to make it work.
This JS Bin illustrates the problem.
https://jsbin.com/nodonatifo/edit?html,css,output
Initially I thought I would just be able to do something like this on the element.
#container {
width: 300px;
height: 400px;
background-color: #55ffdd;
/* Center on page */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#element-actual {
background-color: red;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left: 0px;
}
<div id="container">
<div id="element-actual"></div>
</div>
However that just fixes the element in the top left corner of the parent container, rather than the window.
Is this possible with my current styles?
#container {
width: 300px;
height: 400px;
position: fixed;
top: 50%;
left: 50%;
background-color: #55ffdd;
margin-top: -200px;
margin-left: -150px;
}
If you use translate property then its children div will place relatively to the parent div only even when it is position:fixed so you can use the above code to place #container in center and you red div will be placed relatively to the window not the parent div :)
As Gaurav Aggarwal already pointed out, the fixed element will still be relative to the parent's transformed positioning. If you want the container element to be dynamically positioned (even if it has unknown dimensions), then you could use the following approach and avoid using transform: translate(-50%, -50%) for vertical/horizontal centering.
This method essentially positions the container element to fill the height/width of the window element with top: 0/right: 0/bottom: 0/left: 0, and then centers it vertically/horizontally using margin: auto.
Example Here
#container {
width: 300px;
height: 400px;
position: fixed;
top: 0; right: 0;
bottom: 0; left: 0;
margin: auto;
background-color: #55ffdd;
}
#element-actual {
background-color: red;
width: 100px;
height: 100px;
position: fixed;
top: 0;
left: 0;
}
<div id="container">
<div id="element-actual"></div>
</div>
Easy, add this to the child:
position: sticky;
I have a question regarding the absolute position div.
I have something like
<div id='body-container'>
<div id='content-wrapper'>
contents....
</div>
</div>
I need to make my body-wrapper with absolute position because of other issues.
my css
#body-container{
position: absolute;
right: 0;
left: 0;
height: 100%;
overflow-y: hidden;
}
I have encounter a problem. Inside my content-wrapper, I have dynamic contents that will be added inside. It will create a unwanted scrollbar and the div become scrollable in that div. Is there anyway to kill the scrolling behavior? Thanks so much.
Remove the height property from your #body-container, and it will fit the content's height. No scrollbar.
http://jsfiddle.net/QeFe5/
EDIT
If you need the wrapper to be full height, then don't forget to set the top: 0 property, so the body won't create a scroll:
#body-container{
position: absolute;
right: 0;
left: 0;
top: 0;
background: silver;
height: 100%;
overflow: hidden;
}
Updated: http://jsfiddle.net/QeFe5/1/
This might work...
#body-container{
position: relative;
}
#content-wrapper{
position: absolute;
right: 0;
left: 0;
height: 100px; /* Need to put an exact height */
overflow: hidden;
}
If you need the content-wrapper to extend the full page you can use top and bottom with absolute positioning and make sure that your body-container (and it's enclosing containers) have height 100%.
#body-container{
position: relative;
height: 100%;
}
#content-wrapper{
position: absolute;
top: 0;
bottom:0;
right: 0;
left: 0;
}
Given an absolutely positioned element with a certain size and overflow:auto and a child element that is also absolutely positioned, anchored to the bottom left corner of the parent element and exceeding it in size, like this:
#container {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
overflow: auto;
}
#content {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 200%;
}
Why does no vertical scrollbar appear on the parent element?
When I change the positioning of the child element to top instead of bottom, the scrollbar appears. It seems like the scrollbar is only visible if the content overflows on the bottom edge of the parent element. Why is this the case?
Here is the link to a JSFiddle that demonstrates the issue: http://jsfiddle.net/qGsd3/14/
I was hoping for a more interesting answer, but it seems to be: "Because the spec says so."
EDIT: I just realized that isn't the right section... But luckily I found the correct one so the answer stands.
http://www.w3.org/TR/2007/WD-css3-box-20070809/#abs-non-replaced-width
At the bottom there are the rules that dictate when height is calculated and how and it states only when there is overflow on the bottom does it extend the height. There is more reading there about how this affects overflow, so just poke around.
Absolute elements don't take up any space, that's why. Absolute positioning isn't needed for your content, change it to static, I can't understand what you are trying to accomplish there...
In my experience, nesting an absolute position inside another absolute position has given me nothing but headaches. Also, for heights, percentages can be hit or miss depending on the browser. Take a look here to see what I did on the 'bad' class to display the overflow.
#container {
position: relative;
width: 100px;
height: 100px;
overflow: auto;
background: green;
text-align: right;
top: 100px;
}
.left {
left: 100px;
}
.right {
left: 300px;
}
#content {
position: absolute;
width: 50%;
height: 100px;
background: red;
}
.good {
top: 0;
left: 0;
}
.bad {
bottom: -20px;
left: 0;
}
http://jsfiddle.net/qGsd3/39/
I have a relatively simple layout as seen in the simplified version of the code below:
<div id="protocol_index_body_wrapper">
<div id="protocol_index_body">
</div>
</div>
The CSS
#protocol_index_body_wrapper {
background: url("/images/stripe.png") repeat scroll 0 0 transparent;
position: absolute;
top: 120px;
left: 0px;
right: 0px;
bottom: 10px;
}
#protocol_index_body {
width: 960px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
The absolute positioning is needed to make sure that both div's expand to the full height of the window. The expected behavior is seen in the image above and is present in IE8, Firefox, and Chrome. However, in IE7 the div which should be centered is flush against the left side. Any ideas how to fix this?
Have you tried specifically assigning an auto value to the margin-left and margin-right? This will force both margins to be equal and center the div provided your div is not at 100% width of the page.
{
margin-left: auto;
margin-right: auto;
}