css 相对定位与绝对定位

 这种效果，如果来实现呢？一般会有一些三方的组件，比如Icon 图标 van-icon。

 

 也可以手工写下： 

<div class="container">
   <div class="item_dot">
   </div>
</div>

容容

.container{
   position: relative; /* 容器采用相对定位 */
　　...
}

右侧角标   

.item_dot{
   position: absolute;
   top:5px;
   right:5px;
   ...
}

 

css 定位

CSS（Cascading Style Sheets）中的定位属性用于控制元素在页面上的布局。常见的定位属性有以下几种：

1. static（默认值）：元素按照正常文档流进行布局，不会被其他元素所影响。

position: static;

 

2. relative：相对定位，通过设置top、bottom、left或right来调整元素的位置，但保持原始空间不变。

position: relative;
top: 50px; /*向下移动50像素*/
left: -30px; /*向左移动30像素*/

3. absolute：绝对定位，将元素从正常文档流中脱离，并根据最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（body）进行定位。

position: absolute;
top: 50%; /*相对于容器顶部居中*/
left: 50%; /*相对于容器左边居中*/
transform: translate(-50%, -50%); /*使用translate函数微调位置*/

 

4. fixed：固定定位，与absolute类似，但是相对于视口而非已定位祖先元素进行定位。

position: fixed;
top: 0; /*相对于视口顶部*/
left: 0; /*相对于视口左边*/
width: 100vw; /*宽度为视口宽度*/
height: 100vh; /*高度为视口高度*/
z-index: 9999; /*设置叠放次序*/

　　5. sticky：粘性定位
通过设置元素的position属性为sticky，可以实现元素在特定的滚动区域内粘性定位。元素在滚动到指定位置前是相对定位，滚动到指定位置后则固定在指定位置，

直到滚动区域滚动超过指定位置。

 

这些只是CSS定位属性的基本介绍，还可以结合其他属性（如overflow、display等）来更加精确地控制元素的定位效果。