草庐IT

POSITION

全部标签

html - Z-index 不按预期工作与图片和背景-div

我有一张图片,我想在我的页面上产生一个效果,在图片的左侧和底部显示一个灰色的background-div5px。但出于某种原因,我无法让background-div在图片后面对齐。它总是放在最上面。我该如何解决这个问题?Jsfiddle:http://jsfiddle.net/3Z7m4/2/ 最佳答案 将position:relative;添加到imgCSS中。参见:http://www.w3schools.com/cssref/pr_pos_z-index.aspNote:z-indexonlyworksonpositioned

html - Z-index 不按预期工作与图片和背景-div

我有一张图片,我想在我的页面上产生一个效果,在图片的左侧和底部显示一个灰色的background-div5px。但出于某种原因,我无法让background-div在图片后面对齐。它总是放在最上面。我该如何解决这个问题?Jsfiddle:http://jsfiddle.net/3Z7m4/2/ 最佳答案 将position:relative;添加到imgCSS中。参见:http://www.w3schools.com/cssref/pr_pos_z-index.aspNote:z-indexonlyworksonpositioned

html - 为什么 `transform` 会中断 `position: fixed` ?

其实我已经找到问题的原因了。我现在的问题是,为什么将transform添加到您的html,body会破坏position:fixed?原始问题最简单的CSS任务对我来说似乎失败了:position:fixed没有保持元素相对于视点的位置。考虑以下样式表:.stay-there-dammit{position:fixed;right:0px;left:0px;z-index:1030;}第一次加载页面时,定位是正确的。但是对视口(viewport)的任何更改(例如滚动或调整大小)都不会影响.stay-there-dammit元素的定位。可以说它没有调整其位置以适应新的视口(viewpor

html - 为什么 `transform` 会中断 `position: fixed` ?

其实我已经找到问题的原因了。我现在的问题是,为什么将transform添加到您的html,body会破坏position:fixed?原始问题最简单的CSS任务对我来说似乎失败了:position:fixed没有保持元素相对于视点的位置。考虑以下样式表:.stay-there-dammit{position:fixed;right:0px;left:0px;z-index:1030;}第一次加载页面时,定位是正确的。但是对视口(viewport)的任何更改(例如滚动或调整大小)都不会影响.stay-there-dammit元素的定位。可以说它没有调整其位置以适应新的视口(viewpor

html - 如何在 Flexbox 对齐的侧边栏上模拟 'position:fixed' 行为

因为已经回答了(HowcanIhaveaposition:fixed;behaviourforaflexboxsizedelement?),绝对/固定定位的盒子被从Flexbox对齐元素的正常流中取出。但是我怎样才能至少模拟position:fixed行为,比如width:300px;高度:100vw元素?这是一个初始布局演示(http://codepen.io/anon/pen/ZGmmzR),左边是侧边栏,右边是内容block。我希望nav像position:fixed元素一样跟随用户滚动页面。我知道没有Flexbox怎么办。首先,我会考虑不使用JavaScript的纯CSS解决方

html - 如何在 Flexbox 对齐的侧边栏上模拟 'position:fixed' 行为

因为已经回答了(HowcanIhaveaposition:fixed;behaviourforaflexboxsizedelement?),绝对/固定定位的盒子被从Flexbox对齐元素的正常流中取出。但是我怎样才能至少模拟position:fixed行为,比如width:300px;高度:100vw元素?这是一个初始布局演示(http://codepen.io/anon/pen/ZGmmzR),左边是侧边栏,右边是内容block。我希望nav像position:fixed元素一样跟随用户滚动页面。我知道没有Flexbox怎么办。首先,我会考虑不使用JavaScript的纯CSS解决方

html - 为什么 "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto"实际上居中?

我在CSS方面非常精通,但今天我偶然发现了一个让我头疼的片段(here和here)。我从没想过可以通过margin:0auto将绝对定位的元素居中,但考虑到所讨论的元素具有设置的宽度并且有left:0和对:0,它实际上似乎有效:#parent{background:#999;height:300px;position:relative;width:300px;}#child{background:#333;height:50px;left:0;margin:0auto;position:absolute;right:0;width:50px;}(JSFiddle)我一直认为left:0

html - 为什么 "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto"实际上居中?

我在CSS方面非常精通,但今天我偶然发现了一个让我头疼的片段(here和here)。我从没想过可以通过margin:0auto将绝对定位的元素居中,但考虑到所讨论的元素具有设置的宽度并且有left:0和对:0,它实际上似乎有效:#parent{background:#999;height:300px;position:relative;width:300px;}#child{background:#333;height:50px;left:0;margin:0auto;position:absolute;right:0;width:50px;}(JSFiddle)我一直认为left:0

html - 如何在谷歌地图上最好地显示 HTML5 地理定位精度

我愿意:使用HTML5收集用户的纬度、经度和准确性在谷歌地图中将其显示为一个点更改点的大小以及map的比例以反射(reflect)位置的准确性。这应该是可行的,但我还没有看到任何人实现它。 最佳答案 应该可以。根据这个articleHTML5位置对象返回以米为单位的精度属性。googlemapapi能够在给定中心点(纬度、经度)和以米为单位的半径的情况下绘制圆。我是这样想的:varlatitude=position.coords.latitude;varlongitude=position.coords.longitude;vara

html - 如何在谷歌地图上最好地显示 HTML5 地理定位精度

我愿意:使用HTML5收集用户的纬度、经度和准确性在谷歌地图中将其显示为一个点更改点的大小以及map的比例以反射(reflect)位置的准确性。这应该是可行的,但我还没有看到任何人实现它。 最佳答案 应该可以。根据这个articleHTML5位置对象返回以米为单位的精度属性。googlemapapi能够在给定中心点(纬度、经度)和以米为单位的半径的情况下绘制圆。我是这样想的:varlatitude=position.coords.latitude;varlongitude=position.coords.longitude;vara