绝对位置。力顶部：0

的结构如下：

一些水平填充甲<div>容器腾出地方的人字形。左
一个<div为雪佛龙在与：position : absolute; left:0;
一个<div用于人字形右边有：position : absolute; right:0;
一个<div>包含具有white-space: nowrap; overflow:hidden

问题的图像：如果我不我得到这个结果：

有人可以解释为什么吗？

HTML：

<div class="container"> 
    <div class="img-container"> 
     <ul> 
      <li><img src="http://placehold.it/150x100/EEE04A/ffffff?text=Image%201"> 
      </li><li><img src="http://placehold.it/150x100/5cb85c/ffffff?text=Image%202"> 
     </li><li><img src="http://placehold.it/150x100/5bc0de/ffffff?text=Image%203"> 
     </li><li><img src="http://placehold.it/150x100/f0ad4e/ffffff?text=Image%204"> 
     </li><li><img src="http://placehold.it/150x100/FF3167/ffffff?text=Image%205"></li> 
     </ul> 
    </div> 
    <div class="button-left"> 
     <img src="http://placehold.it/50x100/cccccc/ffffff?text=<"> 
    </div> 
    <div class="button-right"> 
     <img src="http://placehold.it/50x100/cccccc/ffffff?text=>"> 
    </div> 
</div>

CSS：

ul { 
    padding-left: 0; 
    margin: 0; 
    list-style:none; 
} 

.container { 
    width: 450px; 
    padding: 0 50px 0 50px; 
    position: relative; 
} 

.img-container { 
    overflow:hidden; 
    white-space: nowrap; 
} 

.img-container li { 
    display:inline-block; 
} 

.button-left { 
    position: absolute; 
    left: 0; 
    /* top: 0; */ 
} 

.button-right { 
    position: absolute; 
    right: 0; 
    /* top: 0; */ 
}

来源

2016-04-15 Arnaud Denoyelle

甲CSS3替代方案将是适用'显示：flex'到主'.container'和'ul'。不需要绝对定位或内联块。 –

@Michael_B这很整齐。因为它阻止内容在页面不够大时进入下一行，所以它更好。 –

您可以在这里了解更多关于flexbox的信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

我觉得其他的答案周围的真实问题，这是你有两个内容堆叠的行（幻灯片裙在它们的下面，箭头）。你可以用绝对定位来解决这个问题，但我认为将它们放在同一水平行开始时会更清洁。使用float一个简单的例子：

JSFiddle

来源

2016-04-15 13:24:42 colonelsanders

绝对定位不需要 '相对' 元件（如所设定的上面的.box元素）。如果您绝对定位没有定位上下文的元素，则定位将发生在整个页面上。（例外情况是，如果不指定任何顶部，底部，左侧或右侧的值，那么即使没有定位上下文，上下文也会自动成为直接的容器元素，并且元素仍然处于流程）。

因此，如果您不指定顶部或左侧位置的某些元素与position: absolute他们认为这些位置根据其在DOM中的正常位置。在你的情况下，他们在DOM中正常位置处于最高位置。要放置绝对位置的元素，我们应该在大多数情况下明确提供这些属性以避免问题。

来源

2016-04-15 12:57:47

你给IMG容器position:absolute;和width:450px;

ul { 
 
    padding-left: 0; 
 
    margin: 0; 
 
    list-style:none; 
 
} 
 

 
.container { 
 
    width: 450px; 
 
    padding: 0 50px 0 50px; 
 
    position: relative; 
 
    
 
} 
 

 
.img-container { 
 
    overflow:hidden; 
 
    white-space: nowrap; 
 
    position: absolute; 
 
    width: 450px; 
 
} 
 

 
.img-container li { 
 
    display:inline-block; 
 
} 
 

 
.button-left { 
 
    position: absolute; 
 
    left: 0; 
 
    /* top: 0; */ 
 
} 
 

 
.button-right { 
 
    position: absolute; 
 
    right: 0; 
 
    /* top: 0; */ 
 
}

<div class="container"> 
 
    <div class="img-container"> 
 
    <ul> 
 
     <li><img src="http://placehold.it/150x100/EEE04A/ffffff?text=Image%201"> 
 
     </li><li><img src="http://placehold.it/150x100/5cb85c/ffffff?text=Image%202"> 
 
     </li><li><img src="http://placehold.it/150x100/5bc0de/ffffff?text=Image%203"> 
 
     </li><li><img src="http://placehold.it/150x100/f0ad4e/ffffff?text=Image%204"> 
 
     </li><li><img src="http://placehold.it/150x100/FF3167/ffffff?text=Image%205"></li> 
 
    </ul> 
 
    </div> 
 
    <div class="button-left"> 
 
    <img src="http://placehold.it/50x100/cccccc/ffffff?text=<"> 
 
    </div> 
 
    <div class="button-right"> 
 
    <img src="http://placehold.it/50x100/cccccc/ffffff?text=>"> 
 
    </div> 
 
</div>

来源

2016-04-15 13:04:47 DanyCode

绝对位置。力顶部：0

回答

相关问题