Question

我正在编写一个轮播小部件，并且遇到了相对定位两个链接句柄的问题。

两个句柄都应位于中间（使用CSS top/bottom），但在加载页面时，只有left/right设置正确，而top/bottom不起作用。

这是一个JSBIN：JSBIN

奇怪的是，如果我在Firebug中打开/关闭CSS规则，手柄就会正确定位。更好的是，当点击它时，手柄会跳回到“错误”位置

我的CSS：

ul.ui-carousel {
  list-style: none outside none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  min-height: inherit;
  height: inherit;
  outline: 0;
  overflow: hidden;
  margin: 0 -15px;
  white-space: nowrap;
}
ul.ui-carousel li {
  display: inline-block;
  list-style: none outside none;
  -webkit-border-radius: inherit;
  border-radius: inherit;
  overflow: inherit;
  width: 100%;
  height: inherit;
  position: relative;
}
ul.ui-carousel li a {
  -webkit-border-radius: inherit;
  border-radius: inherit;
  height: inherit;
  text-decoration: none;
  overflow: auto;
  width: inherit;
  }
ul.ui-carousel li a img {
  width: 100%;
  display: table-row-group;
  float: left; /* fix for gap made by Firefox */
  -webkit-border-radius: inherit;
  border-radius: inherit;
}
.ui-carousel.ui-carousel-handles li img {
height: inherit;
}
.ui-carousel.ui-carousel-inset.ui-carousel-handles {
    max-width: 93%;
}
.ui-carousel.ui-carousel-inset.ui-carousel-handles,
.ui-carousel-handle-left,
.ui-carousel-handle-right {
    vertical-align: middle;
}
.ui-carousel-handle-left.ui-carousel-handle-inset {
    margin-right: .25em;
    display: inline-block;
}
.ui-carousel-handle-right.ui-carousel-handle-inset {
    margin-left: .25em;
    display: inline-block;
}
.ui-carousel-handle-left:not(.ui-carousel-handle-inset) {
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    display: inline-block;
    margin-left: -1em;
    padding: 0.5em;
    right: 0%;
    top: 45% !important;
    z-index: 1;
}
.ui-carousel-handle-right:not(.ui-carousel-handle-inset) {
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    display: inline-block;
    margin-right: -1em;
    padding: 0.5em;
    right: -97%;
    top: -42% !important;
    z-index: 1;
}
.ui-carousel.ui-carousel-inset.ui-carousel-handles {
    margin: 0;
}

问题：
为什么我的句柄定位不正确，即为什么left/right正在工作而top/bottom没有？奇怪的跳跃怎么样？任何想法如何“强制”链接显示他们应该在哪里？

由于

修改：
我知道使用绝对/相对位置可以很容易地解决这个问题。但我想尝试在不使用标准absolute/relative方式的情况下使其工作。

Answer 1

ul.ui-carousel li a{
    position: fixed;
    left: 0;
    top: 50%!important;/* this will solve your problem*/
    margin-top: 23px;
}

ul.ui-carousel li a.ui-carousel-handle-left{
    left: 0;
}


ul.ui-carousel li a.ui-carousel-handle-right{
    right: 0;
}

Answer 2

确定。似乎position:relative:top在这里使用不正确。经过多次改编后，这项工作（JSBIN）......

我将两个链接元素移动到包含我的图像的列表之后。然后我切换到float:left/right和否定margin-top，如下所示：

 .ui-carousel-handle-left:not(.ui-carousel-handle-inset) {
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    margin: -60% 0 0 -1.25em;
    float: left;
    display: inline-block;
    padding: 0.5em;
 }
 .ui-carousel-handle-right:not(.ui-carousel-handle-inset) {
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    margin: -60% -1.25em 0 0;
    float: right;
    display: inline-block;
    padding: 0.5em;
 }

根据我在MDN上的理解，css margin percentage是基于包含元素宽度计算的，而css top percentage是基于包含元素的高度。

似乎我的问题源于我的包含元素高度由jQuery Mobile重新计算（我正在这样做），而它的宽度似乎没有改变。因此margin-top有效，而pos:relative:top没有。

为什么我的相对定位元素顶部/底部不工作/跳到错误的位置？

2 个答案: