如何在右上方显示关闭按钮而不是左

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

我已经通过位置做出这样的：相对的;到其父母和位置：绝对;给它的孩子，现在它的工作正常，你可以看到....