CSS定位

最新推荐文章于 2024-09-01 19:28:10 发布

Leemin_ios

最新推荐文章于 2024-09-01 19:28:10 发布

阅读量542

点赞数 1

分类专栏： CSS 基础教程学习笔记

本文链接：https://blog.csdn.net/Leemin_ios/article/details/52193052

版权

CSS 基础教程学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了CSS定位机制，包括普通流、浮动和绝对布局。重点讲解了CSS position属性，如static、relative、absolute和fixed，帮助理解如何改变元素在页面上的位置。

摘要由CSDN通过智能技术生成

CSS定位

CSS浮动

1，CSS定位：

改变元素在页面上的位置

2，CSS定位机制

普通流：元素按照其在HTML中的位置顺序决定布局的过程。

浮动

绝对布局

3，CSS定位属性：

1、CSS position属性

static

relative

absolute

fixed

z-index: 1;/*值大的呈现在前面，无上限，尽量在100以内*/

事例：

.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="position1"></div>
    <div id="position2"></div>
<script>
    for(var i=0; i<100 ; i++){
        document.write(i+"<br />");
    }
</script>
</body>
</html>

.CSS

#position1{
    width: 100px;
    height: 100px;
    background-color: darkgoldenrod;
    /*
    position属性介绍：
    relative：相对布局
    absolute：绝对布局，不占位置
    fixed：固定，滚动不动
    static：设置偏宜量不起效果
    */
    position: relative;
    left: 20px;
    top:20px;
    z-index: 1;/*值大的呈现在前面，无上限，尽量在100以内*/
}
#position2{
    width: 100px;
    height: 100px;
    background-color: darkblue;
    /*
    position属性介绍：
    relative：相对布局
    absolute：绝对布局，不占位置
    fixed：固定，滚动不动
    static：设置偏宜量不起效果
    */
    position: relative;/*相对位置*/
    left: 10px;
    top:10px;
    z-index: 2;
}

在浏览器中显示的效果：