css position 用法_已迁移

转载于 2016-09-26 10:38:00 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/Majw/blog/751562

文章标签：

#javascript #ViewUI

本文介绍了一种使用CSS实现悬浮操作按钮的方法，通过设置不同元素的position属性为relative和absolute，使得在不改变原有布局的前提下，增加的操作项可以悬浮显示。此方法适用于需要快速添加编辑或删除选项的新闻列表等场景。

为什么80%的码农都做不了架构师？>>>

position: relative(相对) absolute(绝对)

效果图如下：

html结构代码：

<div class="news-group">
<form action="" class="edit_item">
    <div class="news-lists">
          <p>标题标题标题</p>
          <div class="cover">
              <img src="xxxxx/57d8e6c60571a.jpg" alt="" />
          </div>
    </div>
    <div class="hidden-action">
        <a href="javascript:void(0)">编辑</a>
        <a href="javascript:void(0)">删除</a>
    </div>
</form>
</div>

css代码实现：

.news-group .edit_item{
    position: relative;
}

.news-group .hidden-action{
    background: RGBA(0,0,0,.4);
    position: absolute;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

转载于:https://my.oschina.net/Majw/blog/751562