Question

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

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

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

组件如下：

#refine ：最左边的按钮。
#refineDropdown ：点击优化按钮时显示的下拉菜单
#search ：输入框
#dropdown ：实时类型搜索过滤框
#submit ：最右侧的搜索按钮

问题：创建小部件时，应该相对还是绝对地进行定位？如果我在页面上有多个这样的实例，那么下拉列表的位置应该与它们在页面上的位置无关，但是我不完全理解定位和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

我相信您希望通过相对定位完成这一事实的原因是您认为绝对定位始终与页面相关。惊喜：事实并非如此。

实际上，绝对的是第一个设置了position属性的父级。因此，简单的解决方案可能是将整个窗口小部件包装成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;
}

将使内部div与“BlaBla”位于网页的（100,100），而不是容器div。换句话说，如果我将<p>adsadds转换为<p>adsadds <br />，那么“BlaBla”也会被推下来。

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

1 个答案: