css-position | 易学教程

Why doesn't top: 0 work on absolutely-positioned elements relative to body?

阅读更多关于 Why doesn't top: 0 work on absolutely-positioned elements relative to body?

You can see in the code below that the h1 pushes down the body and the absolutely-positioned block .absolute does not stick to the top. But you also can see that the same block is stuck to the top of its parent .wrapper . Why? I'm not asking how to do that trick; I know how, e.g. padding instead margin to h1, or clearfix to parent and so on. I'm interested in only one thing: why h1 's margin pushes down the body , but is not pushing down .wrapper ? body { position: relative; margin: 0; padding: 0; overflow: hidden; background-color: silver; } .absolute { position: absolute; top: 0; left: 0;

Firefox ignores absolute positioning in table cells

阅读更多关于 Firefox ignores absolute positioning in table cells

问题 I am trying to absolutely position an element inside a table cell. The TD has position:relative and the element has position:absolute . This works great in all browsers except in Firefox where it is positioned relative to an ancestor relative container. You can see this reproduced in this fiddle: http://jsfiddle.net/ac5CR/1/ Does anyone know if I miss some CSS setting that can fix that in Firefox? 回答1: the element is not a block element. add to the style display:block, you will get the needed

how to make DIV height 100% between header and footer

阅读更多关于 how to make DIV height 100% between header and footer

Is there a way to setup a layout so that the header is 50px, body is 100% and footer is 50px? I would like the body to use up the entire viewing area at minimum. I would like to have the footer and header to be on the screen at all times I created an example in jsfiddle: UPDATED JsFiddle: http://jsfiddle.net/5V288/1025/ HTML: <body> <div id="header"></div> <div id="content"><div> Content </div></div> <div id="footer"></div> </body> CSS: html { height: 100%; } body { height:100%; min-height: 100%; background: #000000; color: #FFFFFF; position:relative; } #header { height:50px; width:100%; top

Page Down key usability with a fixed position bar at the top of a page

阅读更多关于 Page Down key usability with a fixed position bar at the top of a page

问题 If you have a absolutely positioned (position: fixed) bar at the top of a page, as many websites do, it breaks the behavior of the Page Down button (and also Page Up). Instead of Page Down leaving you with a line or so of text at the top of your screen that was previously at the bottom of the screen to make continued reading easier, there is a little bit of cutoff that is very annoying. Here is a contrived example of this. Is there any way of working around this problem (besides avoiding

Google Maps api v3 tools: visual distortions?

阅读更多关于 Google Maps api v3 tools: visual distortions?

I just noticed that the gMap view tools are displaying…rather unusually. Their regions still seem to be properly defined—I can interact with them just fine, it's just their appearance that looks messed up. I haven't applied any CSS to any of the map pieces, and the only css I've applied to the map container is width:100%; height:100%; z-index:0; (which I normally do). I do have other elements on the page which have position:absolute; and position:fixed; and some high z-index s (500 & 1000). Is it possible they are causing the visual distortion of the Map's tools? I see the same weird visual

Div with scrollbar inside div with position:fixed

阅读更多关于 Div with scrollbar inside div with position:fixed

I have a div with position:fixed that is my container div for some menus. I've set it to top:0px, bottom:0px to always fill the viewport. Inside that div I want to have 2 other divs, the lower one of which contains lots of lines and has overflow:auto. I would expect that it would be contained within the container div, but if there are too many lines it simply expands outside the fixed div. Below is my code and a screenshot to clarify: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

Center div horizontally

阅读更多关于 Center div horizontally

问题 On this page, I would like to horizontally center the main #container div relative to the page. Normally I would achieve this by adding a CSS rule, #container { margin: 0 auto } However, the layout of this page (which I did not write), uses absolute positioning for #container and most of its child elements, so this property has no effect. Is there any way I can achieve this horizontal centering without rewriting the layout to use static positioning? I've no problem with using JavaScript

Why doesn't translateX work as expected for fixed elements on IE9, IE10, and IE11?

阅读更多关于 Why doesn't translateX work as expected for fixed elements on IE9, IE10, and IE11?

问题 I'm trying to achieve the following in IE9, IE10, and IE11 (works perfectly on Chrome and FF): In mobile mode, I have a main #container wrapper that holds the entire site contents and a nav side menu div which is inside the #container (cannot be moved out, btw), yet is not visible and is hidden off-screen. When a user clicks a menu open toggle button, it should slide the #container to the right, revealing the nav side menu div directly positioned to its left. The "sliding" is happening using

How can I style an HTML INPUT tag so it maintains CSS when focused on Android 2.2+?

阅读更多关于 How can I style an HTML INPUT tag so it maintains CSS when focused on Android 2.2+?

I was delighted to discover that Android 2.2 supports the position:fixed CSS selector. I've built a simple proof-of concept, here: http://kentbrewster.com/android-scroller/scroller.html ... which works like a charm. When I attempt to add an INPUT tag to my header, however, I hit trouble. On focus, every device I've tried so far clones the INPUT tag, gives it an infinite Z-index, and repaints it on top of the old tag. The clone is in roughly the right position, but most of its parent's CSS (including, of course, position:fixed) is ignored. The cloned INPUT tag is the wrong size and shape, and

Scrolling with fixed div layout and min-widths

阅读更多关于 Scrolling with fixed div layout and min-widths

问题 I've been trying to layout this page, but for the life of me, can't seem to get it to work the way I want. Window = black Titlebar = red Content div = blue Vertical scrollbar = green Horizontal scrollbar = yellow Min titlebar/content div width of 1024px, growing to window size. I may be completely overthinking it and the answer may be way simpler than I'm attempting. Basically I want to have a fixed titlebar div at the top of the page that never scrolls vertically. If it does not fit in the