vue 控件的四个角设置 父视图position:relative

这篇具有很好参考价值的文章主要介绍了vue 控件的四个角设置 父视图position:relative。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

父视图relative,子视图 absolute

<div class="bg1">

                            <i class="topL"></i>

                            <i class="topR"></i>

                            <i class="bottomL"></i>

                            <i class="bottomR"></i>

                            <div class="tableTitle">

                                <div style="float: left;;">7日内出库排行</div>

                            </div>

                            <div id="main11" style="width: 100% !important;height:calc(100vh * 340 / 1080) ;"

                                class="echart">

                            </div>

                        </div>

.topL {

    width: 5px;

    height: 5px;

    border-top-width: 2px;

    border-top-color: #26c6f0;

    border-top-style: solid;

    border-left-width: 2px;

    border-left-color: #26c6f0;

    border-left-style: solid;

    position: absolute;//根据父视图决定位置

    top: -2px;

    left: -2px;

}文章来源地址https://www.toymoban.com/news/detail-651767.html

.topR {

    width: 5px;

    height: 5px;

    border-top-width: 2px;

    border-top-color: #26c6f0;

    border-top-style: solid;

    border-right-width: 2px;

    border-right-color: #26c6f0;

    border-right-style: solid;

    position: absolute;

    top: -2px;

    right: -2px;

}

.bottomL {

    width: 5px;

    height: 5px;

    border-bottom-width: 2px;

    border-bottom-color: #26c6f0;

    border-bottom-style: solid;

    border-left-width: 2px;

    border-left-color: #26c6f0;

    border-left-style: solid;

    position: absolute;

    bottom: -2px;

    left: -2px;

}

.bottomR {

    width: 5px;

    height: 5px;

    border-bottom-width: 2px;

    border-bottom-color: #26c6f0;

    border-bottom-style: solid;

    border-right-width: 2px;

    border-right-color: #26c6f0;

    border-right-style: solid;

    position: absolute;

    bottom: -2px;

    right: -2px;

}

.bg1 {

    height: calc(100vh *385 / 1080);

    width: 100%;

    border-radius: 5px;

    border: 1px solid rgba(25, 186, 139, .17);

    background: rgba(255, 255, 255, .04);

    position: relative;//相对于自身的位置而言

}

到了这里,关于vue 控件的四个角设置 父视图position:relative的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 线程的四个属性

    如上图所示,线程有四个属性: 线程ID 线程名称 守护线程 线程优先级 每个线程都有id,这个id不能修改 线程id会不停的自增,从1开始 main函数就是第一个线程,id=1 id 是操作系统用来识别各个线程的编号,具有唯一性,从下面 java 的源码中看到,这个线程的Id初始值是0,但是

    2024年02月07日
    浏览(50)
  • 价值投资的四个理念

    我是 2006 那年接触股市的,那是一个大牛市,和很多人一样一般都是从牛市才接触到股市。一开始什么也不懂,打开证券软件满眼都是 K 线图,所以一开始主要玩法就是看看图,所谓 “技术派”。玩了两三年,发现所谓 “技术” 其实完全没有技术的感觉,没有沉淀,也没有

    2024年02月03日
    浏览(42)
  • MySQL的四个隔离级别对比

    最近在看MySQL的常见面试题, 简单记录一下. 主要为了保证ACID中的隔离性, 一致性是目的. 原子性, 隔离性, 持久性都是手段. 隔离级别 脏读(Dirty Read) 幻读(Phantom Read) 不可重复读(Non-repeatable Read) Read Uncommitted 可能发生 可能发生 可能发生 Read Committed 不会发生 可能发生 可

    2024年02月13日
    浏览(41)
  • 事务的四个特性、四个隔离级别以及数据库的常用锁

    事务的四个特性、四个隔离级别以及数据库的常用锁 四大特性 事务的四大特性,通常被称为ACID特性,是数据库管理系统(DBMS)确保事务处理的关键属性。这四大特性分别是: 原子性(Atomicity): 原子性要求事务是一个不可分割的单位,要么全部执行,要么全部不执行。如

    2024年02月04日
    浏览(48)
  • 从大数据的四个V了解它

    我们一起创造了比以往更多的数据。想想看,除了工作之外,你在日常生活中创造了多少数据!例如,社交媒体上浏览的信息,Spotify上的音乐列表。将这些数据与来自世界各地其他人和组织的所有数据结合起来,你会感到头晕。我们的行为,无论是线上还是线下,都会产生数

    2024年02月04日
    浏览(46)
  • 详解数字化转型的四个层级

    数字化转型是指组织利用数字技术来改变其业务模式、流程和文化,以提高效率、增强竞争力和创造更好的客户体验。数字化转型是一个复杂的过程,涉及组织的多个方面。在这个过程中,有四个主要的层级需要被理解和管理。本文将详细介绍数字化转型的四个层级,以及每

    2024年02月01日
    浏览(36)
  • 用wireshark流量分析的四个案例

    目录 第一题 1 2 3 4 第二题 1 2 3. 第三题 1 2 第四题 1 2 3 题目: 1.黑客攻击的第一个受害主机的网卡IP地址 2.黑客对URL的哪一个参数实施了SQL注入 3.第一个受害主机网站数据库的表前缀(加上下划线例如abc ) 4.第一个受害主机网站数据库的名字 打开流量包,直接筛选http || tls找

    2024年02月10日
    浏览(44)
  • 【Go】常见的四个内存泄漏问题

    1、这里更多的是由于channel+for+select导致的,错误的写法导致了发送者或接收者没有发现channel已经关闭,任务已经结束了,却仍然在尝试输入输出https://geektutu.com/post/hpg-exit-goroutine.html 不要把map用作全局

    2024年02月13日
    浏览(44)
  • 程序员避免项目延期的四个小窍门!

    原创:陶朱公Boy(微信公众号ID:taozhugongboy),欢迎分享,转载请保留出处。 点评: 身为程序员的你,不知道在你身上曾经有没有发生过,因为种种原因,导致项目延期的情况?(约定某个时间点上线,结果拖到几天时间后)这里面我相信肯定有一些客观因素存在:比如就

    2024年02月08日
    浏览(49)
  • 矩阵相似的四个必要条件及性质证明。

    1.四个必要条件 2.严格证明 必要1 秩相等 必要2 行列式相等 必要3 特征值相等 必要4 迹相等 1.矩阵相似性质 2.严格证明 性质1 次幂相似,多项式相似 性质2 可逆相似,可逆的多项式相似 性质3 转置相似 性质4 伴随相似

    2024年02月15日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包