1

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

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

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

组件如下：

  • #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 }
4

1 回答 1

2

我相信您希望使用相对定位来完成此操作的原因是您认为绝对定位始终相对于页面是绝对的。惊喜：不是。

实际上，绝对是第一个设置了 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;
}

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

于 2012-11-15T18:45:53.250 回答