fixed

New Fixed position bug on iOS8

由 纵饮孤独 提交于 2019-12-18 05:55:15
问题 I have a site with a fixed header and slide-out sidebars. With iOS7 in portrait orientation, the fixed header stays fixed when the sidebar is visible, but on iOS8 the header pushes slightly upward depending on how far down you are scrolled. I need it to stay fixed. See this jsbin: http://jsbin.com/xuyevi/2/ The main pieces are a header, a sidebar, and the main content. The header is fixed to the top of the screen using fixed position and has a z-index that keeps it above the content when you

New Fixed position bug on iOS8

由 南笙酒味 提交于 2019-12-18 05:55:06
问题 I have a site with a fixed header and slide-out sidebars. With iOS7 in portrait orientation, the fixed header stays fixed when the sidebar is visible, but on iOS8 the header pushes slightly upward depending on how far down you are scrolled. I need it to stay fixed. See this jsbin: http://jsbin.com/xuyevi/2/ The main pieces are a header, a sidebar, and the main content. The header is fixed to the top of the screen using fixed position and has a z-index that keeps it above the content when you

position之fixed固定定位、absolute绝对定位和relative相对定位

由 狂风中的少年 提交于 2019-12-18 02:13:36
什么是层模型？ 什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。 如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。 层模型有三种形式： 1、 绝对定位 (position: absolute) 2、 相对定位 (position: relative) 3、 固定定位 (position: fixed) 层模型--绝对定位 如果想为元素设置层模型中的绝对定位，需要设置 position:absolute (表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于 浏览器窗口 。 如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position

Fixed Position Background on iOS

由 倾然丶 夕夏残阳落幕 提交于 2019-12-17 22:19:33
问题 I have a website that has a full-image fixed background that the content "floats" above. It works fine in desktop browsers, but the fixed background ends up scrolling on iPads and other tablets. This seems to be a common issue, but then I ran across this website, which seems to have a fixed background even on iPad's. http://confitdemo.wordpress.com/ Any clue how they are pulling that off? I tried: #content-wrapper.posts-page { background-attachment: fixed !important; background-clip: border

EditText with not-editable/not-cancellable suffix

由 吃可爱长大的小学妹 提交于 2019-12-17 19:21:44
问题 i created a layout for one of my activities in which users can insert a value in some EditText widget. I need that some of these EditText must have a suffix (like cm, mm and so on) that has to be not editable. After the user has inserted the value i will parse the content of these EditText avoiding the suffix so i will handle the only input without the suffix. How to do that? I have already searched and searched here on SO but nothing helped me. I found answers like this one https:/

css 定位属性：position

由 强颜欢笑 提交于 2019-12-17 18:23:37
对于position一直存有一些疑惑,特别是相关联的z-index属性,更是有些摸不着头脑,今天好好学习一下position属性的各个值不同的表现形式 语法： position：static | relative | absolute | fixed 默认值：static 取值： static： 无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用 relative： 对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置 absolute： 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义 fixed： 对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值 说明： 检索对象的定位方式。 对应的脚本特性为position。 兼容性： 都支持，除IE6不支持fixed取值参数 上面的说法比较全面，但是不易理解，我做了一个demo页面，从实例出发，一目了然，代码如下： View Code <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" />

Fixed positioning/z-index issue in mobile safari

由 独自空忆成欢 提交于 2019-12-17 15:27:55
问题 So the site in question: http://kaye.at/baby The main content below scrolls up over the top of the countdown and under the navigation which are both fixed elements. This works fine on desktop but on mobile safari, the content scrolls behind the countdown as the user moves up but once touch is released, it pops in front. Just wondering whether this is a bug or it is something that can be fixed? Here's the CSS: #header { position: fixed; width: 100%; top: 0px; z-index: 10; } #content { width:

Hide scrollable content behind transparent fixed position divs when scrolling the page?

由 守給你的承諾、 提交于 2019-12-17 10:49:17
问题 I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent). I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't). This is very hard to explain, so I did the best I could. html: <div id="header"> <div id="topmenu">Home | Find Feeds | Subscriptions</div> </div> <div id="container

Chrome issue with background-attachment fixed and position fixed elements

由 南笙酒味 提交于 2019-12-17 10:17:09
问题 I've had this issue for a while and it seems to be a Chrome redraw bug that hasn't been fixed. So I'm looking for any stop-gap fixes. The main issue is that when an element on the page has a background image that uses: background-attachment: fixed; If another element is fixed and has a child video element it causes the element with the background image to disappear. Now it works fine in Safari (and Firefox and IE) so it's not exactly a webkit issue. I've applied several properties that have

Disable zoom on a div, but allow zoom on the page (an alternate div)

由 时光毁灭记忆、已成空白 提交于 2019-12-17 06:13:32
问题 Is there a way to disable zoom on a div, or any particular elements on a website? For example, if I wanted the page to be zoomable, but not the #Header div, is there a way to make one zoomable, and the other not zoomable? Basically, when you zoom on a mobile device, it zooms the Header too, but I want the header to be a fixed size at all times (not zoomable). I know that you can use this code to disable zooming overall: <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0;
订阅 fixed