css 元素相对定位，相对自己本身的位置定位

Mr丶张某人

已于 2023-07-12 09:39:03 修改

阅读量436

点赞数

分类专栏： CSS HTML 文章标签： css css3 前端

于 2022-01-07 15:35:54 首次发布

本文链接：https://blog.csdn.net/weixin_45316408/article/details/122365748

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

元素在盒子内相对于自己本身的位置偏移.屡试不爽

<div>
    <span class="error_msg">密码输入错误</span>
    <input type="text" class="input">
</div>

div{
    position: relative;
    .error_msg{
        top: -1.3rem;
        position: absolute;
    }
}

多行数据默认只展示一行，有展开按钮，点击之后可以查看到多行

<div class="layui-card layui-card-one">
    <p style='height:30px;font-size:16px;font-weight: bold;'>{$talentPool.name}</p>
    <div style='display:flex;height:30px;'>
        <p style='width:33%;'><span style='color:#AAAAAA;'>创建时间：</span>15日</p>
        <p style='width:33%;'><span style='color:#AAAAAA;'>现有人数：</span>54人</p>
        <p style='width:33%;'><span style='color:#AAAAAA;'>人才库类型：</span>A型</p>
    </div>
    <div class="text">
        <span style='color:#AAAAAA;'>描述：</span>
        <span>一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题一大段问题</span>
    </div>
    <span class="expand">展开</span>
</div>

$('.expand').click(function(){

    // 给指定的元素添加或删除样式
    let item = $('.text');

    item.toggleClass('switching_height');
    if(item.hasClass('switching_height')){
        $(this).text('收起');
    }else{
        $(this).text('展开');
    }


})

.layui-card-one{
    padding:15px;
    position: relative;
    overflow: hidden;

}
.expand{
    position: absolute;
    right:40px;
    bottom: 10px;
}
.text{
    white-space: nowrap;
    overflow: hidden;
    height: 20px;
    text-overflow: ellipsis;
    width:calc(100% - 90px);
}
.switching_height{
    white-space: unset;
    overflow: unset;
    height: unset;
}

.text::after {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
}

子元素在父元素内完全居中

        .inner {
          position: relative;
          border: 1px dashed black !important;
          box-sizing: border-box;
          background-clip: content-box;

          i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }