CSS 之定位（Positioning）

Posted 2022-05-25 样子2018

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 之定位（Positioning）相关的知识，希望对你有一定的参考价值。

一、属性

属性	简介
position	检索对象的定位方式
z-index	检索或设置对象的层叠顺序
top	检索或设置对象与其最近一个定位的父对象顶部相关的位置
right	检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom	检索或设置对象与其最近一个定位的父对象底边相关的位置
left	检索或设置对象与其最近一个定位的父对象左边相关的位置
clip	检索或设置对象的可视区域。区域外的部分是透明的

二、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        body
            position: relative;
        
        div
            width: 200px;
            height: 200px;
            position: absolute;
            clip: rect(auto 100px 100px auto);
            background: red;
            color: #fff;
        
    </style>
</head>
<body>
    <div>看看被剪切后的效果</div>
</body>
</html>

CSS

以上是关于CSS 之定位（Positioning）的主要内容，如果未能解决你的问题，请参考以下文章

绝对定位( Absolute positioning )