如何使链接浮动在div的左上角

时间:2017-07-03 08:48:04

标签: html css3

我想在div的左上角浮动一个链接,它也应该在前面 目的是在点击该链接时切换bootsrap折叠功能。

下面是我的代码。

let btnAttachments = UIButton(type: .custom)
btnAttachments.setTitle(strcount, for: .normal).setTitleColor(UIColor.white, for: .normal)
btnAttachments.frame = CGRect(x: 160, y: 100, width: 50, height: 50)
btnAttachments.titleLabel?.backgroundColor=com.getRedcolor()
btnAttachments.titleLabel?.font=UIFont.init(name: "Bariol", size: 15)
btnAttachments.layer.cornerRadius = 0.5 * button.bounds.size.width
btnAttachments.clipsToBounds = true

它的工作但链接完全在div内部,我希望它在外面和半内部。喜欢这个红色加号 enter image description here

1 个答案:

答案 0 :(得分:0)

我做了一个我想你想要的简单例子。使用bootstrap 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>
&#13;
&#13;
&#13;