html css学习笔记-定位

最新推荐文章于 2022-11-25 01:31:49 发布

绿叶清风

最新推荐文章于 2022-11-25 01:31:49 发布

阅读量582

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/PZ0605/article/details/45752355

版权

html/css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*#position1{*/
            /*background-color: palegoldenrod;*/
            /*width: 100px;*/
            /*height: 100px;*/
            /*position: relative;*/
            /*left: 30px;*/
            /*top:50px;*/
        /*}*/

        /*绝对布局，不占用位置*/
        /*#position1{*/
            /*background-color: palegoldenrod;*/
            /*width: 100px;*/
            /*height: 100px;*/
            /*position: absolute;*/
            /*left: 30px;*/
            /*top:50px;*/
        /*}*/
     /*fixed:位置固定了，不会跟着滚动条滚动*/
        /*#position1{*/
            /*background-color: palegoldenrod;*/
            /*width: 100px;*/
            /*height: 100px;*/
            /*position: fixed;*/
            /*left: 30px;*/
            /*top:50px;*/
        /*}*/
        /*静态时，设置偏移量(top,left。。)时不管用*/
        #position1{
            background-color: palegoldenrod;
            width: 100px;
            height: 100px;
            position: relative;
            left: 30px;
            top:50px;
            z-index:3;
        }
        /*与前面一个div重合在一起了*/
        #position2{
            background-color: red;
            width: 100px;
            height: 100px;
            position: relative;
            left: 20px;
            top:20px;
            z-index: 2;
        }
     </style>
</head>
<body>
<!--
  css定位：改变元素在页面上的位置
  css定位机制：
    普通流：元素按照其在html中的位置顺序决定排布的过程（根据摆放顺序）
    浮动：
    绝对布局：
  定位属性：
    positon:把元素放在一个静态的，相对的，绝对的或固定的位置中
    top:
    left:
    right:
    bottom
    overflow:设置元素溢出其区域发生的事情 （是否出现滚动动）
    clip:设置元素显示形状 （主要用于图片）
    vertical-align:垂直对齐方式
    z-index:堆叠顺序（优先级）
   positon:
     static:
     relative:
     absoulte:
-->
<div id="position1"></div>
<div id="position2"></div>
<script>
    for(var i=0;i<100;i++){
        document.write(i+"<br/>")
    }
</script>
</body>
</html>

绿叶清风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html css学习笔记-定位

/*#position1{*/ /*background-color: palegoldenrod;*/ /*width: 100px;*/ /*height: 100px;*/ /*position: relative;*/ /*left: 30px;*/
复制链接

扫一扫