Fiddle -
We've got some divs displayed as table/table cell.
Single Cell is 50% wide, We've got absolute positioned element inside first cell-div. This element is 100% wide, but its parent is 50% wide.
On Chrome absolute positioned element is 100% wide of its parent, and on Mozilla Firefox its 100% of screen. Have you idea why is that?
My goal is to make it 100% wide of this parent, and also note that I need it to be absolute positioned.
redTry giving width:inherit for #main.
#main {
width: inherit;
height: 100%;
position: absolute;
top: 0;
opacity: 0.5;
bottom: 0;
z-index: 100;
background: pink;
}
//below is the hack for chrome.
#media screen and (-webkit-min-device-pixel-ratio:0)
{
.d-td div#main
{
width: 100%;
}
}
It happens because Mozilla doesn't support position: relative for any display: table-cell elements. Remove position: relative from table-cell element and create a <div> with position: relative inside it. All position: absolute elements inside this div will be positioned properly.
Related
I have an element that gets position: fixed while dragging. This element is inside a modal that is a direct child of the body element.
On the image below, the modal is gray, the rest of the body is black, and the button is blue. When I add the following styles to the button:
position: fixed;
top: xxxpx;
left: -100px;
It positions the button relative to the modal, not the viewport. Is that even possible that an element with position: fixed be positioned relative to something but the viewport? It acts like an absolutely positioned element instead.
'normally' position fixed fixes relative to the viewport.
But there are exceptions. See MDN
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
Here's a simple example:
body {}
.parent {
position: relative;
margin: 100px;
transform: scale(1);
width: 50vw;
height: 10vw;
background: black;
rfilter: blur(1);
}
.child {
position: fixed;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background-color: blue;
}
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
Notice that the blue child element is placed at the top left of its parent. Its parent has a transform - and as it's scale(1) we might assume it doesn't do much. But it does create the parent as the containing block.
I think your problem is the transform on the parent.
I'm trying to create a document using HTML which when it's printed, adds a 'cover page' with a border. I have a div that's only visible with '#media print', but I can't figure out how to get that div to fill the page. Setting a height of 100% with position: absolute fills the entire document, not just that one page.
Is there a way of restricting the size of the div to just the current page? When I tried position: fixed, it did put it in the right place, but on every page. In essence, I need to find a way to set height to the viewport height, but maintain position: absolute.
For this purpose, I'm restricted to a solution compatible with IE8 only.
Give your html and body a height of 100% then the cover a height of 100% to get a cover height based on the viewport. Give the cover a position of absolute as well and position it.
body, html { height: 100%;
}
#cover { position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
If you do a div#cover like this:
#cover {
background-color: red;
position: absolute;
border: 3px solid blue;
box-sizing: border-box;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
#media print
{
#cover { display: block; }
}
Your first page will be red with a blue border (or whatever it contains in the div)
The top, left, right, bottom make it fit to the viewport.
The box-sizing make it incorporate the border size at the div content width/height.
Without your HTML it's not possible to help further than this.
I have DIV container with relative position, and the child with absolute position.
here is my code source:
JSFIDDLE
HTML:
<div class="wrapper">
<h1>Hello</h1>
</div>
CSS
.wrapper {
background: red;
width: 100px;
height: 100px;
position: relative;
}
.wrapper h1 {
color: #333;
position: absolute;
top: 60px;
}
when I put in top 60px, the child element jump to the bottom , normally the container has a relative position so the child element should be under the container not over the container.
Please, someone can explain me why this happen ?
I hope I explained, well my question.
When you have an element with position: absolute that element is placed relatively to its closest positioned parent. A positioned element is any element with position different from static, be it relative, absolute or fixed.
In your case you have a .wrapper with position: relative and h1 inside it with position: absolute, that is why the latter is positioned 60 pixels from the top of its parent.
If you insist of the child element being below the parent, add z-index: -1 to it - http://jsfiddle.net/jt92sedr/4/
This property applies only to positioned elements.
You can check: http://www.barelyfitz.com/screencast/html-training/css/positioning/
The CSS is actually doing what you think (sort of), but there is also (in Firefox, at least) a 21 pixel top margin which pushes the "text" down a bit farther.
Add a rule to remove the top margin:
.wrapper h1 {
color: #333;
position: absolute;
margin-top: 0; /* added this */
top: 60px;
}
Try adding "margin:0; to the h1 element:
.wrapper h1 {
color: #333;
position: absolute;
top: 60px;
margin:0;
display:block;}
Its the other way around, Relative always means relative to the parent. if you want to the child to be set in relation to parent, then make it relative.
the relative in your case on parent does not mean anything.
Are you wondering why 60px from top of the div looks like 80px or 90 px? If this is your question, answer is easy. Browsers add some margin to h1, div and body elements. Simply clear that efect:
body, div, h1 {
margin: 0;
padding: 0;
}
http://jsfiddle.net/14sLb8jg/
Modern browsers, like Chrome and Firefox, are putting a 0.67em margin on top and bottom of h1 tags.
In your case declaring a margin 0 for .wrapper h1 will solve your problem.
Your code should be:
.wrapper {
background: red;
width: 100px;
height: 100px;
position: relative;
}
.wrapper h1 {
color: #333;
position: absolute;
top: 60px;
margin: 0;
}
If you are in doubt, use your browser's inspection / developer tools to find out what default stylings the browser is giving into any given element so you know which one you need to override.
Jsfiddle Example
View on Jsfiddle
As you can see in this page: http://pitchfork.com/ , there are some audio elements on the right side. I've inspected them and they seem to have absolute positioning. But if you scroll down, you'll see that they are fixed.
How can achieve this behavior? Can be an element Absolute and Fixed positioned?
This is the only way I've found: like #DreamTek said:
<div id="relative-layer">
<div id="fixed-layer">
</div>
</div>
and in the styles file:
#relative-layer {
position:relative;
}
#fixed-layer {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
because using top and right rules positions the layer relative to the window, but if using margin-top and margin-left it is positioned relative to the parent layer.
JSFIDDLE: http://jsfiddle.net/9HQ4b/1/
Create a fixed scrolling sidebar with no JavaScript and a few lines of CSS.
The fixed div in the fiddle below appears to be positioned relative to the container but this is just an illusion.
It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width.
FLUID WIDTH
.wrap {
background: #ccc;
width: 90%;
height: 1000px;
}
.fixed {
position: fixed;
top: 10px;
right: 0;
background: #333;
height: 100px;
width: 10%;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
FIXED WIDTH
.wrap {
background: #ccc;
width: 200px;
height: 1000px;
margin: 0 auto;
}
.fixed {
position: fixed;
top: 20px;
right: 50%;
background: #333;
height: 100px;
width: 50px;
margin-right: -160px;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
A note about CSS positioning.
FIXED
Element is always positioned relative to the screen.
ABSOLUTE
Element is positioned relative to the nearest parent container with a position attribute.
Well, the inspected element IS absolute positioned, but is placed inside a wrapper (in another parent element) - #player-modal, which is fixed positioned!
The absolute position is used inside the fixed positioned parent, so the .hud element to be just a few pixels outside the content area (same spacing in every resolution!). This way the floating is fixed to the content area, instead of depending on the resolution (using fixed positioning + using the "right: 20px;" setting).
I just forgot to mention that it's possible, because the site has fixed width and not responsive layout, adjusting to every resolution. If you plan to use this efect on site with fixed width - it will work, otherwise you could need another solution.
I hope I've explained it well! :-)
You can also use calc() to achieve this. (supported in IE9+):
.fixed {
position: fixed;
right: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
or if you want your fixed div on the left, for instance:
.fixed {
position: fixed;
left: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
I have created a <div> fixed, set the following styles on it:
#mydiv {
position: fixed;
left: -150px;
width: 150px;
top: 0;
bottom: 0;
border: 1px solid #f00;
}
This produces a <div> that is offscreen, and presumably the same height as the window.
Then I apply the following styles to the <body>:
body {
-webkit-transform: translate(150px, 0);
}
To my knowledge, this should move the body 150px to the right, thereby moving #mydiv into view. This works, but now #mydiv is the height of the body, not the height of the window.
Here's a JSFiddle example
Is this a Webkit bug? Or is this something I'm doing wrong?
EDIT:
This appears to happen on Firefox as well.
The solution to this problem, while perhaps not immediately intuitive, is pretty straightforward.
html, body {
height: 100%;
}
Normally position: fixed elements are aligned relative to the window (the parent of the html element). When css transforms are applied, however, position: fixed elements are aligned relative to the closest parent with a css transform applied.
The alternate approach Webkit and other browsers could have taken, would be to still align position: fixed elements to the window. But the problem with this would be the position: fixed div would not move at all when the body was transformed, and so the div would still be positioned offscreen.