css - 将绝对定位转换为相对定位

Question

我很愚蠢，在 jsFiddle 中使用绝对定位构建了一个 Web 小部件，因为它只是一个快速原型(prototype)来向某人展示该功能如何工作。

好吧，我们决定现在就使用它，我在转换元素以利用相对定位时遇到了麻烦。此外，我正在尝试将其转换为 jQuery UI 小部件，因此我希望设置所有内容，以便它可以毫无问题地转储到页面上。

可以看到widget HERE 。它基本上是一种搜索框，允许使用最左边的按钮进行一些过滤。

组件是这样的:

• #refine:最左边的按钮。
• #refineDropdown:点击优化按钮时出现的下拉菜单
• #search:输入框
• #dropdown: 直播式搜索过滤框
• #submit:最右边的搜索按钮

问题:创建widget时应该相对定位还是绝对定位？如果我在一个页面上有多个这样的实例，下拉菜单的位置应该独立于它们在页面上的位置，但我不完全理解定位和 HTML 排列来让它工作。

CSS:

.inline { float:left; }
.clearBoth { clear:both; }
#refine {    
    position: relative;
    margin-right: -3px;    
    overflow:hidden;
    white-space:nowrap;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    border:1px solid #AAA;
    height:12px;
    padding:6px 25px 6px 6px;
    text-align:center;
    font-size:11px;
    font-family:Helvetica, sans-serif;
    color:#666;
    text-shadow:0px 1px 0px #e8eae5;
}
#refine:hover {
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
    cursor:pointer;
}
#submit {
    float: left;
    margin-right:-1px;
    overflow:hidden;
    white-space:nowrap;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    border:1px solid #AAA;
    height:12px;
    padding:6px 6px 6px 6px;
    text-align:center;
    font-size:11px;
    font-family:Helvetica, sans-serif;
    color:#666;
    text-shadow:0px 1px 0px #e8eae5;
}
#submit:hover {
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
    cursor:pointer;
}
.refineClicked {
    background:white !important;
    border-bottom-left-radius:0px !important;
    border-bottom:none !important;
}
.arrow-down {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #666;
    right: 7px;
    top: 10px;
}
#search {
    float: left;
    height: 24px;
    margin-right:-5px;
    padding: 0px 7px 0px 7px;
    border:1px solid #AAA;
    color:#444;    
}
#search:focus { outline:none }
#refineDropdown {
    position:relative;
    top:40px;
    left:30px;
    width:150px;
    max-height:200px;
    background:#fff;
    border-left:1px solid #AAA;
    border-right:1px solid #AAA;
    border-bottom:1px solid #AAA;
    word-wrap:normal;
    overflow:auto;
}

#dropdown {
    top: 76px;
    padding:3px;
    width:200px;
    max-height:200px;
    background:#fff;
    border-left:1px solid #CCC;
    border-right:1px solid #CCC;
    border-bottom:1px solid #CCC;
    word-wrap:normal;
    overflow:auto;
    left: 59px;
    position: absolute;
}
ul {
    list-type:none;
    margin:0;
    padding:0;    
}
li {
    padding:5px 10px 5px 10px;
}
li:hover {
    margin:-1px;
    background:#E5F3FF;
    border:1px solid #3366FF;
    cursor:pointer;  
}
.selected {
    margin:-1px;
    background: #E5F3FF;
    border:1px solid #3366FF;
}
.hidden { display:none }

Answer 1

我相信您希望通过相对定位完成此操作的原因是您认为绝对定位对于页面而言始终是绝对的。惊喜:事实并非如此。

事实上，它绝对指向的是设置了位置属性的第一个父节点。因此，简单的解决方案可能是将整个小部件包装到一个 div 中，并将该 div 的位置声明为相对位置。

例如:

<p>adsadds
   <div class='container'>
       <div class='absolutelyPositioned'>BlaBla</div>
   </div>
sddasda</p>

使用这个 CSS:

.container
{
    position: relative;
}

.absolutelyPositioned
{
    position: absolute;
    top: 100px;
    left: 100px;
}

将带有“BlaBla”的内部 div 的位置不在网页的 (100, 100)，而是在容器 div 的位置。换句话说，如果我转<p>adsadds进入<p>adsadds <br /> “BlaBla”也将被下推。