56 lines
1.2 KiB
SCSS
56 lines
1.2 KiB
SCSS
|
/*!markdown
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
title: Position
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
定位相关样式。
|
|||
|
|
|
|||
|
|
| Class | Properties |
|
|||
|
|
| ----------- | ------------------------ |
|
|||
|
|
| static | position: static; |
|
|||
|
|
| fixed | position: fixed; |
|
|||
|
|
| absolute | position: absolute; |
|
|||
|
|
| relative | position: relative; |
|
|||
|
|
| sticky | position: sticky; |
|
|||
|
|
|
|||
|
|
## 用法
|
|||
|
|
|
|||
|
|
请前往一下文档查看属性含义。
|
|||
|
|
|
|||
|
|
https://www.w3school.com.cn/cssref/pr_class_position.asp
|
|||
|
|
|
|||
|
|
# 响应式设计
|
|||
|
|
|
|||
|
|
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
|
|||
|
|
|
|||
|
|
## 状态前缀
|
|||
|
|
|
|||
|
|
不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
@mixin make-position($prefix: '.') {
|
|||
|
|
@each $name,
|
|||
|
|
$value
|
|||
|
|
in (
|
|||
|
|
static: static,
|
|||
|
|
fixed: fixed,
|
|||
|
|
absolute: absolute,
|
|||
|
|
relative: relative,
|
|||
|
|
sticky: sticky
|
|||
|
|
)
|
|||
|
|
{
|
|||
|
|
#{$prefix + $name} {
|
|||
|
|
position: $value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@include make-position();
|
|||
|
|
@each $deivce in map-keys($devices) {
|
|||
|
|
@include media-device($deivce) {
|
|||
|
|
@include make-position('.' + selector-escape($deivce + ':'));
|
|||
|
|
}
|
|||
|
|
}
|