css - 为什么我的 在使用位置 :relevant on p tags within the ? 时四处移动

Question

我有一个左侧菜单，使用固定宽度 div，里面有一个 ul li，我也是在文本的 li 中有 p 标签。当我在 p 标签上使用 position:relative 时，我的 li 变得不稳定(不固定)例如，如果我从右到左突出显示我的 li 中的文本，整个 li 元素将向左移动。很奇怪。如果我从 p 标签中删除 position:relative ，一切都会像预期的那样“固定”。

li 的移动在您开始从右到左突出显示文本之前不会引起注意。它在 iPad 上变得非常明显，一次滑动，它不仅上下移动(正常)，而且从左到右移动(不正常)。

我这里有例子:http://jsfiddle.net/prNb6/

HTML

<div class="left">    
    <ul>      
        <li class="list">       
            <p class="title">Why</p>
            <p class="type">Does it do this?</p>      
        </li>   
    </ul>      
</div><!--end Left-->

CSS

 body, html {
     height:100%;
 }

 .left {
     width:260px;
     height:100%;
     background:#fff;
     float:left;
     overflow:scroll;
     background:yellow;
 }


 ul li  {
     display:block;
     background:#16BF14;
     height:60px;
     width:260px;
     text-decoration:none;
     position:relative;
 }

 p.title {
     position:relative;
     top:10px;
     left:10px;
 }

 p.type {
     font-size:12px;
     position:relative;
     top:10px;
     left:10px;
 }

 ul {
     margin:0;
     padding:0;
 }

li, p {
    margin:0;
    padding:0;
    list-style-type:none;
} 

为什么li会这样？

如果没有 position:relative，我如何能够调整我的 p 标签的位置？

Answer 1

当你定位一些相对的东西时，就像把它从 parent 那里拿出来放在上面一样。所以 parent 不再一视同仁。由于段落是显示 block ，它们占据了整个容器，但您的偏移量为 260px，但超过父级边缘 10px，因此 ipad 正在滚动，因为您导致了溢出。像这样在 p-tags 上使用填充可能会更好:

p.title {
    padding-top: 10px;
    padding-left: 10px;
}

或者为了使周围的间距均匀:

p.title {
    padding: 10px;
}