css-position | 易学教程

While scrolling on an iOS device, the z-index of elements isn't working

阅读更多关于 While scrolling on an iOS device, the z-index of elements isn't working

问题 My layout is fairly simple, a repeating background element, a couple of vertical spaces (roads) and some horizontal bridges and a little car which should drive underneath them when you scroll. Everything works just fine on my Mac but on iOS devices —my testing devices are: iPhone 4 on iOS 6.1, iPad 2 on iOS 6.1.3— the z-index isn't being honoured when the scroll event is active. This means that as you scroll, the car, which is position: fixed to the window , is moving over the bridge (which

Difference between static and relative positioning

阅读更多关于 Difference between static and relative positioning

In CSS, what is the difference between static (default) positioning and relative positioning? Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left , top , right and bottom rules: Relative positioning allows you to specify a specific offset ( left , top etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div I could apply relative positioning on the textbox to have it display at specific place relative to

Why is an element with position: fixed moving with a non-positioned sibling?

阅读更多关于 Why is an element with position: fixed moving with a non-positioned sibling?

There are a lot of questions on S.O. that cover the answer to how to fix this (add top: 0 ), but none of them attempt to actually explain the reasoning behind the header movement. I'm more curious as to why this is the case. <header>Project Header</header> <main class="container" id="layout-mainContent"> <div class="row" id="first-row">somecontent</div> </main> header { position: fixed; } #layout-maincontent { margin-top: 90px; //moves header down. } List of like-questions but with no reasoning: Topmost 'fixed' position div moving with non position div margin affects other fixed elements

Mobile Webkit reflow issue

阅读更多关于 Mobile Webkit reflow issue

问题 I've been experiencing an issue in mobile versions of webkit (specifically Webkit 534.46 on iOS 5.1.1 as mobile Safari, and now Chrome for iOS) which doesn't happen on any desktop browser that I've seen. (i.e. the demos below should be viewed on a mobile version of webkit.) Here is a live example of the issue. The core of the CSS is extremely straight forward. It positions an alphabet index along the left of the page: #index { left:0; margin:0; padding:0; position:fixed; top:0; width:3em; }

Absolute position is not working

阅读更多关于 Absolute position is not working

I'm trying to place a div with id 'absPos' in absolute position in relation to its parent div. But it is not working, the div is placed at the top left corner of the page. My code sample is as follows <html> <body> <div style="padding-left: 50px;"> <div style="height: 100px"> Some contents <div> <div style="height: 80px; padding-left: 20px;"> <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div> Some text </div> </div> </body> </html> Can you help me to solve this issue. In my actual case instead of the red background color I've to place

position: absolute without setting top/left/bottom/right?

阅读更多关于 position: absolute without setting top/left/bottom/right?

Case #1: I want to put a logo above the photo in the header in the default WordPress theme ( http://twentyelevendemo.wordpress.com/ ) My solution: add the logo before the photo, and set position: absolute on it, without setting any of the top/left/bottom/right properties: http://jsfiddle.net/TsAJp/ Html: <a id="header"> <img id="logo"> <img id="photo"> </a> Css: #logo { position: absolute; margin: 10px; /* or padding: 10px; */ /* or border: 10px solid transparent; only this works with my elderly iPhone Simulator.app */ } Case #2: Another example is a horizontal multi-level menu which is 100%

Why using absolute position causes the div to be on top?

阅读更多关于 Why using absolute position causes the div to be on top?

问题 Please see this very simple snippet to illustrate my question below: #container { position: relative; padding: 20px; border: 2px solid gray; } #back { position: absolute; top: 0; bottom: 50%; left: 0; right: 0; background-color: #bbb; } <div class="col-sm-12" id="container"> <div id="back"></div> <h1>Some Text</h1> </div> The h1 tag is after the back element, in the HTML code. As I don't change its position property, it must be static . And, as far as I know, static elements are positioned

body { overflow-x: hidden; } breaks position: sticky

阅读更多关于 body { overflow-x: hidden; } breaks position: sticky

问题 I have an element that I am making sticky with position sticky: #header { position: sticky; width: 100vw; top: 0; } <app-header id="header"></app-header> And that works fine, but I realised that if I use: body { overflow-x: hidden; } That breaks sticky, and I need to set body overflow-x to hidden , how can I fix that, with only CSS solution, no JS solutions? 回答1: UPDATE: This has been successfully tested on Safari v12.0.2, Firefox v64.0, and Chrome v71.0.3578.98 Added position: -webkit-sticky

Set Google Maps Container DIV width and height 100%

阅读更多关于 Set Google Maps Container DIV width and height 100%

I loaded Google Maps API v3 and print Google Map in div . But when set width & height to 100% and auto I can't see the Map. Here is HTML code snippet.  <div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div> Is there a way to fix this issue? You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least. body, html { height: 100%; width: 100%; } div#content { width: 100%; height: 100%; } Setting Map Container to position to

Mobile Safari bug on fixed positioned button after scrollTop programmatically changed…?

阅读更多关于 Mobile Safari bug on fixed positioned button after scrollTop programmatically changed…?

I'm just about done a webpage but there is one bug in Mobile Safari (iPhone and iPad iOS 5.0.1) with two buttons that are fixed to the upper and lower right corners.. The buttons are not faded in until after clicking submit on a textbox which opens up to the rest of the page... After the rest of the page is loaded and the buttons are faded in you can click on either of them and they both work... However, clicking them causes a programmatic scroll and after that scroll is complete you can no longer click on either of the buttons until you physically scroll the page with your finger even just a