把一個盒子放在主DIV的外面，但仍然與它相關

Question

我遇到了堵塞，我似乎無法繼續前進。我試圖移動一個帶有幾個選項（如報告，喜歡，不喜歡等）的小盒子，但仍然保持從外部粘貼。讓我用一個形象展示：

我已經試過這實現了幾種方法，但問題是，盒子是在身體的中心，這意味着有一個從左邊和右邊一些填充（響應填充通過Bootstrap的類設置），所以我很難計算整個事情。

我已通過jQuery試過這樣：

$('.image-options').css('right', $('.image-options').parent().width() + 50 + 'px'); 

$(window).resize(function(){ 
    $('.image-options').css('right', $('.image-options').parent().width() + 50 + 'px'); 
}) 

哪裏.image-options是選項框和其父是Main DIV。我想象這個選項框的寬度始終是50px，所以我認爲這使整個定位問題變得更容易一些。

我在Bootstrap 3上建立我的網站，所以我使用了很多他們的課程。這是我的HTML看起來像（忽略模板語法）：

{% extends "base.twig" %} 
{% block content %} 
<div class="content row"> 
    <div class="col-lg-12"> 
     {% include "overall_header.twig" %} 

     <div class="row"> 
      <section class="col-lg-12"> 
       <div class="upload-space"> 
        <!-- This is the options box --> 
        <div class="affix image-options"> 
         Report 
        </div>  

        <div class="row inner"> 
         <section class="col-lg-12"> 

          <section class="row"> 

           <div class="col-lg-12 center"> 
            <a href="{{ S_IMAGE_URL }}" class="lightview"> 
             <img src="{{ S_IMAGE_URL }}" class="img-thumbnail" alt="{{ S_IMAGE_NAME }}" /> 
            </a> 
           </div> 

           <br /> 

           <div class="col-lg-12"> 
            <div class="form-group"> 
             <label for="direct_url">Direct:</label> 
             <input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_URL }}" readonly> 
            </div> 

            <div class="form-group"> 
             <label for="direct_url">Thumbnail:</label> 
             <input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_THUMB }}" readonly> 
            </div> 

            <div class="form-group"> 
             <label for="direct_url">Direct:</label> 
             <input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_BBCODE }}" readonly> 
            </div> 

            <div class="form-group"> 
             <label for="direct_url">Direct:</label> 
             <input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_HTML }}" readonly> 
            </div> 
           </div><!-- col --> 

          </section> <!-- row --> 
         </section> <!-- col --> 
        </div><!-- .row.inner --> 
       </div> 
      </section> 
     </div><!-- row --> 

    </div><!-- Main column --> 
</div><!-- Content --> 
{% endblock content %} 

這是小CSS我寫了我的選項框：

.image-options { 
    background: yellow; 
    width: 50px; 
    word-break: break-word; 
} 

.upload-space是主要DIV在我們的案例。

---

如何讓我的選項框保持粘到主分區，即使頁面響應和主要DIV的寬度/高度可能會有所不同基於瀏覽器的大小所有的時間？

謝謝。

Answer 1

通過這樣的結構：

<div class="upload-space"> 
    <!-- This is the options box --> 
    <div class="affix image-options"> 
     Report 
    </div> 

您可以position:absolute以這種方式工作：

.upload-space { 
    position:relative; 
} 
.image-options { 
    position:absolute; 
    width:50px; 
    top:0; 
    left:-50px; 
} 

入住這Demo Fiddle

Answer 2

爲什麼使用JavaScript這個？ 你可以用簡單的CSS來做到這一點。

如果我理解您的願望，您可能正在尋找類似的東西？

http://codepen.io/steveHimself1397/pen/gxatc

史蒂夫

Answer 3

你的意思是這樣 http://tarcisius-ede.nl/ 呢？

如果是這樣，請參閱css文件的信息。 它有一個主要的div（wrap div），並且比選項框有負邊界。

我們使用CSS媒體查詢來使它適合不同的瀏覽器寬度。 和元素的位置是絕對的，但這是額外的...