divの左上隅にリンクフロートを作成するには

Question

divの左上隅に浮動小数点のリンクを追加したい場合は、それも前面にする必要があります その目的は、そのクリックでブーツラップの折りたたみ機能を切り替えることですリンク。

以下は私のコードです。

<div id="Header" class="container container-fluid well-lg img-rounded shadow" style="background-color:whitesmoke">   
<div class="row" id="header"> 
    <div id="content"> 
     <div><a href="#" class="btn-floating halfway-fab waves-effect waves-light red"> 
      </a></div> 
    </div> 
     <div class="col-lg-offset-1 col-lg-3 col-md-3 col-sm-6"> 
      @*<a href="@Url.Action("Index", "Home")">*@ 
       <img src="~/Images/svc.jpg" class="img-rounded"/> 
      @*</a>*@ 
      <br /> 
      <b><i>Report </i></b> 
     </div> 
     <div class="col-sm-12 hidden-lg hidden-md" > 
      <hr style="visibility: hidden" /> 
     </div> 
     <div class="col-lg-3 col-md-3 col-sm-12"> 
      @*@Html.DropDownListFor(m => m.State, ViewBag.StateList as IEnumerable<selectlistitem>, new { @class = "form-control input-sm", @onchange = "this.form.submit()" })*@    
      @Html.DropDownListFor(m => m.State, ViewBag.StateList as IEnumerable<SelectListItem>, new { @class = "form-control input-md", @data_toggle = "tooltip", @title = "Select a State from here" }) 
     </div> 
     <div class="col-sm-12 hidden-lg hidden-md"> 
      <hr style="visibility: hidden" /> 
     </div>   
      <div class="col-lg-3 col-md-3 col-sm-12" > 
       @Html.TextBoxFor(m => m.date, new { @class = "form-control input-md", @id = "dp1", @PlaceHolder = "Click Here to Select a Date", @data_toggle = "tooltip", @title = "Select a Date from here" }) 
      </div> 

    <div class="col-sm-12 hidden-lg hidden-md"> 
     <hr style="visibility: hidden" /> 
    </div> 
    <div class="col-lg-2 col-md-5 col-sm-12">   
     <table> 
      <tr> 
       <td> 
        <a href="@Url.Action("Back_Date", "BR")"> 
         <img src="~/Images/oie_28455OHvJAUzA.png" class="img-rounded" height="45px" width="45px" data-toggle="tooltip" title="Go back to previous Date" /> 
        </a> 
       </td> 
       <td> 
        <a href="@Url.Action("Next_Date", "BR")" > 
        <img src="~/Images/button-round-arrow-right-icon.png" class="img-rounded" height="45px" width="45px" data-toggle="tooltip" title="Go forward to Next Date"/> 
        </a> 
       </td> 
      </tr> 
     </table>    
    </div> 
    </div> 
</div> 

ITSは作業が、リンクはdivの内側に完全にあり、私はそれが半分外側と内側半分たいです。この赤いプラス記号のように Click to see pic

Answer 1

私はあなたが欲しいと思うものの簡単な例を作った。ブートストラップdata-toggleを使用して

これはあなたがの

.wrapper { 
 
    position: relative; 
 
    margin: 15px; 
 
} 
 

 
a.clickMe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transform: translate(-50%, -50%); 
 
    background: red; 
 
    color: white; 
 
    padding: 0 5px; 
 
    cursor: pointer; 
 
    text-decoration:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <a class="clickMe" data-toggle="collapse" data-target="#text">+</a> 
 
    <img src="http://via.placeholder.com/350x150"> 
 
    <div id="text" class="collapse"> 
 
    <h1>Title</h1> 
 
    <p> 
 
     Some text Some text Some tex 
 
    </p> 
 
    <p> 
 
     Some text Some text Some tex 
 
    </p> 
 
    <p> 
 
     Some text Some text Some tex 
 
    </p> 
 
    </div> 
 
</div>