标签: css-position

在CSS中,静态(默认)定位和相对定位有什么区别？

我在覆盖一些插件CSS方面遇到了问题.直接编辑CSS实际上不是一个选项,因为它会使更新插件更具风险.

问题:元素具有绝对定位,并且在原始元素中具有顶部:0px.我想通过底部覆盖它:0px.

为了举个例子

    .element {position:absolute; top:0;}

    /* in another file */
    .my .element {bottom:0;}

在Firefox上这个工作正常(底部:0是应用的样式),但safari/chrome似乎没有超过顶部:0.

我可以解决这个问题,但提出一个干净的解决方案会很好.

我试图将div插入到正文的任何​​部分并使其position: absolute相对于整个文档而不是具有a的父元素position: relative.

我有3个div元素.

1号div更大(包裹)并且有position:relative;

第2个div位于绝对第1个div相对位置(并包含在第1个div)

第3个div包含在第2个div,也有绝对定位.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

为什么第3个div位置绝对到第2 个位置div(这也是第1个位置的绝对位置div)而不是第1个div位置具有相对位置？

因为第3 div是绝对定位到绝对定位第2 div.

我在网页的左侧有一个div位置fixed,包含菜单和导航链接.它没有从css设置的高度,内容决定高度,宽度是固定的.问题是如果内容太多,div则会大于窗口的高度,部分内容将不可见.(滚动窗口没有帮助,因为位置是fixed并且div不会滚动.)

我试图设置,overflow-y:auto;但这也没有帮助,div似乎没有注意到它的一部分是在窗口之外.

如果需要,如果div挂出窗口,我该如何才能使其内容可滚动？

我有一个绝对位于图像顶部的两个锚点,这些链接可以在其他浏览器(Chrome,FF,Safari)中点击,但不能在IE中点击(到目前为止在8和9中测试)

奇怪的是,如果我给链接一个background-color可点击的,但是如果background-color设置为transparent(这是我想要的)它们不再可点击,我也尝试过设置zoom:1但没有运气.我猜hasLayoutIE中的位消失了IE 8/9所以猜测zoom现在对于这类问题并不重要.

任何想要制作这些链接的想法都会在IE 8/9中以透明的bg显示出来吗？

这是我一直在使用的小提琴:jsFiddle示例

我有以下HTML布局:

<div id="content">
    <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" />

    <div id="countdown"></div>

    <a id="link1" href="http://www.stackoverflow.com" title="link1"></a>
    <a id="link2" href="http://www.stackoverflow.com" title="link2"></a>
</div>

和CSS:

body {text-align:center;}
#content {position:relative; width:724px; height:300px; margin:0 auto;}

#countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;}

#link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;}
#link2 {position:absolute; width:200px; height:35px; bottom:20px; right:0;}

我一直在开发一个网站并利用相当不错的jQuery Sticky Kit插件.它通过在适当时将position属性切换到fixed后退来进行操作.在桌面上运行非常顺畅,在移动设备中也可以接受.

或者至少它曾经.iOS版9配备了一个新的行为:如果position从一个元素的改变static/ relative/ absolute到fixed时滚动动画正在进行的元素变得不可见,直到滚动已经停下来了.奇怪的是,相反的变化(从fixed其他任何东西)执行没有问题.

可以在插件的主页上找到一个工作示例.黑色导航栏("示例参考")应该是粘性的.最初它static位于页面中间.向下滚动它会变为fixed(在iOS 9中)消失直到滚动停止.桌面浏览器和iOS 8中的行为是正确的.

我有点希望得到典型的CSS解决方法:强制进行3D转换,禁用背面可视性等,模糊专有属性,......但似乎没有任何效果.

现在我们是否正在忘记"粘性"元素？

我有一个问题,你在那里的CSS大师!

我有一个菜单,悬停在一个绝对定位的div上.所有菜单项都必须相对定位,因为绝对div将在页面上多次出现,并在一个实例中以多种尺寸显示.

当我不知道父div的大小时,如何将"position:relative"垂直和水平居中的多个项目中心？

我知道具有负边距的'位置:绝对'技巧,但这种情况需要一些不同的东西.

你的帮助将非常感谢.

编辑:

这是代码:

.OuterCase { 
  position  : absolute; 
  width     : 100%;  
  height    : 100%; 
  text-align: center;
}

.InnerItem  { 
   width  : 38px;
   height : 38px;
   display: inline-block;
}

我已经让它将物品水平居中,使得垂直方向有点难以捉摸.谢谢!

我加载了Google Maps API v3并打印了Google Map div.但是当设置宽度和高度为100%并且自动我无法看到地图.

这是HTML代码段.

<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>

有没有办法解决这个问题？

我试图使黑色div(相对)高于第二个黄色(绝对).黑人div的父母也有绝对的位置.

码:

#relative {
	position: relative;
	width: 40px;
	height: 100px;
	background: #000;
	z-index: 1;
	margin-top: 30px;
}
.absolute {
	position: absolute;
	top: 0; left: 0;
	width: 200px;
	height: 50px;
	background: yellow;
	z-index: 0;
}

<div class="absolute">
    <div id="relative"></div>
</div>
<div class="absolute" style="top: 54px"></div>

预期结果: