隐藏绝对定位 div 的溢出会破坏 Javascript答案

【问题标题】：Hiding overflow of absolutely positioned div disrupts Javascript隐藏绝对定位 div 的溢出会破坏 Javascript
【发布时间】：2012-07-25 15:11:48
【问题描述】：

我得到了一些解决方案的帮助，让这个“箭头”在点击时与上面的对象的中间对齐……它工作正常。

从那时起，我在设计上做了更多的工作，需要将“wrap”div 的溢出设置为 position:relative 以隐藏箭头的 x 轴溢出......这可行，但是：

现在对齐已经消失了。我不知道为什么我不擅长 jQuery :(

一个重要的注意事项：这个网站是响应式的，现在调整浏览器的宽度对箭头位置做了一些疯狂的事情（只是因为我已经将换行更改为 position:relative）。

在这里查看代码：http://jsfiddle.net/RevConcept/y86RG/5/

感谢您的帮助！

HTML：

<div class="container">                        
        <div class="row">

                <ol class="flexslider-nav">
                    <li class="threecol">
                        <img id="discover" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
                    </li>
                    <li class="threecol">
                        <img id="design" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
                    </li>
                    <li class="threecol">
                        <img id="develop" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
                    </li>
                    <li class="threecol last">
                        <img id="deploy" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
                    </li>                
                </ol>

            </div><!--end row-->

            <!-- WORKFLOW: DESC. SLIDER -->
            <div class="row">

                <div class="twelvecol last">

                     <div class="arrow-wrap">
                        <div class="arrow"></div>
                     </div><!--end arrow-wrap -->

                    <div class="flexslider">
                        <ul class="slides">
                            <li>
                                <p>Test Content</p>
                            </li>
                            <li>
                                <p>Test Content</p>
                            </li>
                            <li>
                                <p>Test Content</p>
                            </li>
                            <li>
                                <p>Test Content</p>
                            </li>
                        </ul>
                    </div><!--end flexslider-->

                </div><!--end col-->

            </div><!--end row-->

CSS：

   .container p {
       color: #fff;
       line-height: 100px;
       background: #000;
       text-align: center;
       margin: 20px 0 0 0;
    }

    .flexslider p {
        margin-top:0px;
        background:transparent;
        color:#000000;
    }

    .flexslider {
        border-bottom:1px #000 solid;
        border-left:1px #000 solid;
        border-right:1px #000 solid;
    }

    h1, h2, h3 {
        text-align:center;
    }

    .flexslider-nav li img {
        display:block;
        margin:0px auto;
    }

    .arrow {
      position:absolute;
      background:transparent url(http://nillabean.com/images/arrow.png) repeat-x bottom center;
      width:2200px;
      height:40px;
    }

    .arrow-wrap {
        position:relative;       
        height:35px;
        border:1px #C00 solid;
    }

JQUERY：

        var start_pos = $("#discover").offset().left + $("#discover").width()/2 - $(".arrow").width()/2;

    $(".arrow").css("left", start_pos);

    $(".btn-workflow").click(function(event){
        var x = $(this).offset().left;

        var img_width = $(this).width();
        var arrow_width = $(".arrow").width();

        var arrow_x = x + img_width/2 - arrow_width/2;

        $(".arrow").animate({
            "left": arrow_x
        }, "slow");
    });

图片：

这最终是我想要做的......边框和透明度使这比添加简单的箭头更困难。

【问题讨论】：

始终包含相关代码和标记在问题本身，不要只是链接。链接可能会失效，人们不应该通过链接来帮助您。更多：meta.stackexchange.com/questions/118392/…
谢谢！我考虑过...我现在将添加；）
@JaredFarrish，哈哈！我不敢相信我从来没有注意到这一点。谢谢;)
由于您添加的边距，定位已关闭。你将不得不从运动计算中减去它。我会做一个小提琴。
我建议重新考虑您当前的 css。重新调整窗口大小时会出现重大问题。在设置 css 之前，我们无法为您找到解决方案，因为它取决于边距。

标签： jquery html responsive-design css-position

【解决方案1】：

http://jsfiddle.net/y86RG/13/ 那会奏效吗？这是我所做的更改

.arrow {
  position:absolute;
  background:transparent url(http://nillabean.com/images/arrow.png) repeat-x bottom center;
  left: 0;
  top: 0;
  right: 0;
  height:35px;
}

.arrow-wrap {
    position:relative;       
    height:35px;
    border:1px #C00 solid;
}

并在 JS 中，删除以下行

//        $(".arrow").css("left", start_pos);

【讨论】：