如何在右上方顯示關閉按鈕而不是左

Question

我使用燈箱的圖像，但在左上方關閉數組顯示，但我希望它在右邊我是新來的CSS。

我的HTML代碼，給出了光盒上的LinkBut​​ton一個

  <div class="linkbutton"> 

      <a href="image/popup_page_1.png" rel="lightbox"><img src="image/smallicon_2.png" alt="" /></a> 
      </div> 


     </div> 

 <div id="page_two" class="panel"> 
      <div class="main_heading_two">Strategy</div> 
      <div class="menu"> 
       <ul> 
        <li class="stix"></li> 
        <li><a href="#page_one"><img src="image/overview.gif" /></a></li> 
        <li class="stix"></li> 
        <li><a href="#page_two"><img src="image/strategy_active.png"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#"><img src="image/draxxin.gif"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#"><img src="image/excede.gif"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#"><img src="image/results.gif"/></a></li> 
        <li class="stix"></li> 
        <li><a href="#"><img src="image/reference.gif"/></a></li> 
        <li class="stix"></li> 
       </ul> 
      </div> 
      <div class="rightclass_one"><img src="image/whiteslide.png"/></div> 
      <div class="pagetwo_text"><p>Get up to 21 days of BRD therapy strategy using longer-duration antimicrobials DRAXXIN ® (tulathromycin) Injectable Solution and EXCEDE ® (ceftiofur crystalline free acid) Sterile Suspension. 
       </p></div> 
      <div class="pagetwo_list_text">Advantages for Producers: 
       <ul><li>Fewer treatments</li> 
        <li>Less stress on cattle</li> 
        <li>Fewer mortalities</li> 
        <li>Cattle can recover in their own pen 
        </li> 
        <li>Lower treatment costs and higher profits 
        </li></ul></div> 
      <div class="pagetwo_list_text2">Extended duration strategy 
      </div> 
      <div> 
       <ul> 
        <li class="midmenu_1"><a href="#page_one"><img src="image/backward.png"/></a></li> 
        <li class="midmenu_2"><a href="#page_two"><img src="image/forward.png"/></a></li> 
       </ul> 
      </div> 
      <div class="right_text"><p>Either way you use them, it takes both DRAXXIN and EXCEDE for control and treatment of BRD in high-risk cattle to give you the longest duration of BRD therapy 
       </p></div> 
      <div class="image_21"><img src="image/pagetwo_graph_two_4.png"/></div> 
      <div class="ratemeter"><img src="image/pagetwo_graph_one.png"/></div> 
      <div id="one" class="image_one" ><img src="image/optiononetwo.png"/></div> 
      <div id="two" class="image_two"><img src="image/optiononeone.png"/></div> 
      <div id="three" class="image_one_one" ><img src="image/pagetwo_graph_two_11.png" /></div> 
      <div id="four" class="image_two_two" ><img src="image/pagetwo_graph_two_22.png" 
       /></div> 



      <div class="option_image"><img src="image/option_1.png" onclick="showHideDiv()"/></div> 



      <div class="option_image_label">Option 1</div> 
      <div class="option_image_one"><img src="image/option_1.png" onclick="showHideView()"/></div> 
      <div class="option_image_label_one">Option 2</div> 
      <div class="fourteen_day"><img src="image/button_14days.PNG"/></div> 
      <div class="heading_one">Post Metaphylaxis Interval (PMI)</div> 


      <div class="linkbutton_one"> 

      <a href="image/popup_1_page_2.png" rel="lightbox"><img src="image/smallicon_1.png" alt="" /></a> 
      </div> 


      <div class="seven_day"><img src="image/button_7days.PNG"/></div> 
      <div class="heading_two">Post Treatment Interval (PTI)</div> 
      <div class="linkbutton_two"> 
      <a href="image/popup_2_page_2.png" rel="lightbox"><img src="image/smallicon_1.png" alt="" /></a> 
      </div> 


     </div><!-- End of page two-->  

Belos是我的CSS，其用於光盒

.lb-data .lb-close { 
    width:35px; 
    position: absolute; 
    float: right; 
    padding-bottom: 0.7em; 
    outline: none; 
    top:-35px; 
} 

圖像顯示交叉符號右側但遠離圖像

Answer 1

add left：添加到您的css代碼中，並將其放置在您確切需要的位置。

如：

left: 100px; 

Answer 2

適用於：

right:0px; 

持股量將不會在絕對定位的協同工作。

Answer 3

這樣寫：

.lb-data .lb-close { 
width:35px; 
position: absolute; 
padding-bottom: 0.7em; 
outline: none; 
top:-35px; 
right:0; 

}

&沒有必要定義浮動當您使用位置：絕對因爲浮動沒有與位置工作：絕對

Answer 4

這不容易回答wi沒有看到一些其他的HTML代碼，反正浮動和position: absolute不能一起工作。我建議你刪除浮動並將right: 0;添加到你的css定義中。您還應該確定.lb-close的父項已設置position: relative;

Answer 5

.lb-data .lb-close 
{ 
width:35px; 
position: absolute; 
/*float: right;*/ <-- delete this 
padding-bottom: 0.7em; 
outline: none; 
top:-35px; 
right: 0; <-- new line to add 
} 

Answer 6

一個浮重要的事情不絕對位置工作，所以你不需要在這裏定義浮動ü只需要添加權利：0;我希望這會工作的順利開展....

.lb-data .lb-close { 
     width:35px; 
     position: absolute; 
     padding-bottom: 0.7em; 
     outline: none; 
     top:-35px; 
     right:0; 
    } 

修訂ANSWER 在這裏看到的演示工作正常： - http://jsbin.com/ilixux/5/edit

我已經通過位置做出這樣的：相對的;到其父母和位置：絕對;給它的孩子，現在它的工作正常，你可以看到....