快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

定位 Position

概述

基础组件,触发业务逻辑时使用。

一般定位

设置类j-is-*来声明指定元素在文档中的定位类型。*为定位方式值,包含4种:relative相对定位、absolute绝对定位、fixed固定定位、static静态定位。

四角定位

JUI预设了四角定位,以自定义属性的方式对元素进行定位描述。

自定义属性包含4个:left-topright-topleft-bottomright-bottom。如:

<div class="j-is-relative">
    <div class="j-is-absolute" left-top>left-top</div>
    <div class="j-is-absolute" right-top>right-top</div>
    <div class="j-is-absolute" left-bottom>left-bottom</div>
    <div class="j-is-absolute" right-bottom>right-bottom</div>
</div>
left-top
right-top
left-bottom
right-bottom

自定义属性默认值为0。可选值包含4个:5101520。如

<div class="j-is-relative">
    <div class="j-is-absolute" left-top="5">5</div>
    <div class="j-is-absolute" left-bottom="10">10</div>
    <div class="j-is-absolute" right-top="15">15</div>
    <div class="j-is-absolute" right-bottom="20">20</div>
</div>
5
10
15
20
上一章:容器 Docker
下一章:外边距 Margin