使用CSS调整按钮

Question

在下图中，如何调整关闭按钮，使其位于灯箱的右上角？

我有以下代码

<div id="lightbox_fg">
    <h2 id="search_result_display"><button id="close" onClick="closeLightBox()" style="float:right; top:0px; position:relative;">&times;</button></h2>
    <button id="close" onClick="closeLightBox()" style="float:right;">&times;</button>
    <form name="search_form" id="search_form" onSubmit="return false;">
    <input name="searchedit" id="searchedit" type="text" size="30" maxlength="100" value="">
    In:
    <select name="filter1" id="filter1">
      <option value="users">Users</option>
      <option value="forum">Forums</option>
    </select>
    <button id="searchBtn" onClick="searchMyWebsiteFG()">Search</button>
    <br /><br />
    <div id="search_output" style="width:800px; height:385px; border:#000 1px solid; overflow:scroll;"></div>
    </form>
  </div>

我在谈论id =“close”的按钮。我应该在style属性中更改什么？

Answer 1

您可能希望将所有样式移动到外部样式表中，而不是将它们内联。 我的建议是绝对定位关闭按钮元素，并将其父元素放在相对位置。然后设置类似

的东西

    #close{
        position:absolute;
        top:-5px;
        right: -5px;
    }

这里有一篇关于css positioning的好文章 和here是一本很好的css初学者指南