html - 左ではなく右上に閉じるボタンを表示する方法

Question

画像にライトボックスを使用していますが、左上に近い配列が表示されていますが、右側に表示したいのですが、CSSは初めてです。

私のHTMLコードは、リンクボタン1のライトボックスに与えられています

           <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

apply:

 right:0px;

float won't work in conjunction with absolute positioning.

Answer 2

次のように書きます。

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

}

& position:absoluteを使用する場合、floatを定義する必要はありません。floatはposition:absoluteでは機能しないためです。

Answer 3

floatは絶対位置では機能しないため、ここで float を定義する必要はありません。追加する必要があるのは、right:0; だけです。これがスムーズに機能することを願っています....

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

更新された回答 は、デモが正常に動作していることを確認してください:- http://jsbin.com/ilixux/5/edit

私はposition:relative;でこれを作成しました。その親と位置へ:absolute; ご覧のとおり、現在は正常に動作しています....

Answer 4

他の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

add left: to your css code and place it where you exactly desire it.

eg:

left: 100px;