css - 08定位布局

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位布局</title>
    <style>

        /*正常的html文档流是从上往下、从左往右排列。*/
        /*页面排版时想要元素之间相互影响，使用标准的浮动、文档流即可。*/
        /*定位的元素位置固定，位置不受其它元素影响，定位主要应用于页面中轮播图、叠加元素、菜单，移动端的浮动组件等处。*/

        /*相对定位*/
        /*相对定位是相对于元素原来的位置控制，当元素发生位置偏移时，原位置留白。*/
        /*使用position来定位操作元素，relative进行相对定位，保留该元素原来的空间占位，使用top、bottom、left、right等属性控制相对原来空间位的偏移。*/

        /*绝对定位*/
        /*绝对定位不受文档流影响，就像漂浮在页面中的精灵，绝对定位元素拥有行内块特性。*/
        /*如果父级元素设置了 relative | fixed | sticky ，绝对定位子元素将参照此父元素进行定位。*/
        /*使用position来定位操作元素，absolute进行绝对定位，不保留该元素原来的空间占位，使用top、bottom、right等属性控制偏移时，如果父级元素没有定
        位，则参照文档页面进行偏移；如果父级元素有定位（不论何种定位），则参照父级元素进行定位。*/

        /*补充*/
        /*如果没有为定位元素设置偏移，将受父元素的padding等属性影响。但使用定位一般都会设置偏移位置。*/

        /*1.使用相对定位操作元素*/
        /*div {*/
        /*    width: 500px;*/
        /*    height: 500px;*/
        /*    border: 5px solid blueviolet;*/
        /*    padding: 30px;*/
        /*}*/

        /*div img {*/
        /*    width: 50px;*/
        /*    height: 50px;*/
        /*    position: relative;*/
        /*    !*left: 550px;*!*/
        /*    !*top: -30px;*!*/
        /*    right: 20px;*/
        /*    bottom: -100px;*/
        /*}*/

        /*2.使用绝对定位操作元素*/
        /*div {*/
        /*    width: 500px;*/
        /*    height: 500px;*/
        /*    border: 5px solid blueviolet;*/
        /*    padding: 30px;*/
        /*}*/

        /*div img {*/
        /*    width: 50px;*/
        /*    height: 50px;*/
        /*    position: absolute;*/
        /*    !*left: 600px;*!*/
        /*    !*top: 200px;*!*/
        /*    right: 600px;*/
        /*    bottom: 100px;*/
        /*}*/

        /*3.通过定位设置尺寸*/
        /*绝对定位的div在参照父元素(已经设置了定位)进行定位时，如果没有定义宽高，则可以通过left/top或right/bottom来设置尺寸，也可以通过border-radius等设置形状*/
        /*article {*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    border: solid 10px blueviolet;*/
        /*    margin: 100px;*/
        /*    position: relative;*/
        /*    overflow: hidden;*/
        /*}*/

        /*article div {*/
        /*    background-color: greenyellow;*/
        /*    !*width: 200px;*!*/
        /*    !*height: 200px;*!*/
        /*    position: absolute;*/
        /*    left: 300px;*/
        /*    top: 100px;*/
        /*    right: -100px;*/
        /*    bottom: 100px;*/
        /*    border-radius: 50%;*/
        /*}*/

        /*4.控制元素居中定位的几种方式*/
        /*article {*/
        /*    border: solid 8px blueviolet;*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    margin: 100px;*/
        /*    position: relative;*/
        /*}*/

        /*article div {*/
        /*    background-color: greenyellow;*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    !*方式一: 父宽减自宽除以2为left偏移量，top偏移同*!*/
        /*    !*left: 100px;*!*/
        /*    !*top: 100px;*!*/
        /*    !*方式二: 用left和top均偏移50%把左顶点偏移至中心点，然后通过设置margin把div顶到中心*!*/
        /*    left: 50%;*/
        /*    top: 50%;*/
        /*    margin-left: -100px;*/
        /*    margin-top: -100px;*/
        /*    position: absolute;*/
        /*}*/

        /*5.多级定位的注意事项*/
        /*绝对定位子元素的定位参照只依据离他最近的已经定位的父级元素。*/
        /*article {*/
        /*    border: solid 8px blueviolet;*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    margin: 100px;*/
        /*    position: relative;*/
        /*}*/

        /*article section {*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    background-color: #ddd;*/
        /*    position: relative;*/
        /*    left: 100px;*/
        /*    top: 100px;*/
        /*}*/

        /*article section div {*/
        /*    background-color: greenyellow;*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    left: 50%;*/
        /*    top: 50%;*/
        /*    margin-left: -100px;*/
        /*    margin-top: -100px;*/
        /*    position: absolute;*/
        /*}*/

        /*6.滚动对定位元素的影响*/
        /*绝对定位子元素的其相对定位的父元素设置了overflow: scroll时，子元素会随着页面滚动而移动*/
        /*article {*/
        /*    border: 8px solid blueviolet;*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    margin: 100px;*/
        /*    position: relative;*/
        /*    overflow: scroll;*/
        /*}*/

        /*section {*/
        /*    height: 3000px;*/
        /*    background-color: #ddd;*/
        /*}*/

        /*article section div {*/
        /*    background-color: red;*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    bottom: 0;*/
        /*    left: 0;*/
        /*    position: absolute;*/
        /*}*/

        /*7.图标定位案例操作*/
        /*body {*/
        /*    padding: 100px;*/
        /*}*/

        /*ul {*/
        /*    list-style-type: none;*/
        /*}*/

        /*ul li {*/
        /*    width: 300px;*/
        /*    border: solid 8px blueviolet;*/
        /*    overflow: hidden;*/
        /*    position: relative;*/
        /*}*/

        /*ul li img {*/
        /*    width: 100%;*/
        /*    float: left;*/
        /*}*/

        /*ul li > span {*/
        /*    position: absolute;*/
        /*    width: 30px;*/
        /*    height: 30px;*/
        /*    background-color: blueviolet;*/
        /*    border-radius: 50%;*/
        /*    text-align: center;*/
        /*    font-size: 14px;*/
        /*    color: white;*/
        /*    line-height: 2em;*/
        /*    left: 10px;*/
        /*    top: 10px;*/
        /*    box-shadow: 0 0 10px #333;*/
        /*}*/

        /*8.定位叠加很重要*/
        /*使用z-index:正负数控制定位元素叠加层级，数越大越前景。对绝对定位和相对定位都有效*/
        /*配合hover使用可实现图层变换效果*/
        /** {*/
        /*    padding: 0;*/
        /*    margin: 0;*/
        /*}*/

        /*body {*/
        /*    padding: 100px;*/
        /*}*/

        /*ul {*/
        /*    list-style-type: none;*/
        /*}*/

        /*ul li {*/
        /*    width: 300px;*/
        /*    border: solid 8px blueviolet;*/
        /*    position: relative;*/
        /*    cursor: pointer;*/
        /*    overflow: hidden;*/
        /*}*/

        /*ul li:hover img {*/
        /*    z-index: -2;*/
        /*}*/

        /*ul li img {*/
        /*    width: 100%;*/
        /*    position: relative;*/
        /*    float: left;*/
        /*    z-index: 2;*/
        /*}*/

        /*ul li > span {*/
        /*    position: absolute;*/
        /*    width: 30px;*/
        /*    height: 30px;*/
        /*    background-color: blueviolet;*/
        /*    border-radius: 50%;*/
        /*    text-align: center;*/
        /*    font-size: 14px;*/
        /*    color: white;*/
        /*    line-height: 2em;*/
        /*    left: 10px;*/
        /*    top: 10px;*/
        /*    box-shadow: 0 0 10px #333;*/
        /*    z-index: 3;*/
        /*}*/

        /*ul li div {*/
        /*    width: 100%;*/
        /*    background-color: #ddd;*/
        /*    position: absolute;*/
        /*    z-index: 1;*/
        /*}*/

        /*ul li div h2 {*/
        /*    text-align: center;*/
        /*    line-height: 7em;*/
        /*    color: white;*/
        /*}*/

        /*9.京东商城购物车部件*/
        /** {*/
        /*    padding: 0;*/
        /*    margin: 0;*/
        /*}*/

        /*body {*/
        /*    padding-left: 200px;*/
        /*    padding-top: 200px;*/
        /*}*/

        /*article {*/
        /*    width: 150px;*/
        /*    position: relative;*/
        /*    font-size: 14px;*/
        /*    color: #555;*/
        /*    cursor: pointer;*/
        /*}*/

        /*article div {*/
        /*    height: 50px;*/
        /*    border: 1px solid #ddd;*/
        /*    text-align: center;*/
        /*    line-height: 3.5em;*/
        /*}*/

        /*article:hover div:nth-of-type(1) {*/
        /*    border-bottom: none;*/
        /*    border-color: blueviolet;*/
        /*}*/

        /*article:hover div:nth-of-type(2) {*/
        /*    display: block;*/
        /*    border-color: blueviolet;*/
        /*}*/

        /*article div:nth-of-type(1) {*/
        /*    background-color: #fff;*/
        /*    position: relative;*/
        /*    z-index: 2;*/
        /*}*/

        /*article div:nth-of-type(2) {*/
        /*    width: 300px;*/
        /*    position: absolute;*/
        /*    right: 0;*/
        /*    top: 50px;*/
        /*    display: none;*/
        /*}*/

        /*10.固定定位*/
        /*position: fixed相对于页面进行定位，应用于页面固定位置显示的元素，比如菜单栏，广告位等*/
        /*后出现的元素有相对定位时权重会更高，导致固定定位效果丢失，可通过设置较大数值的z-index解决*/
        /** {*/
        /*    padding: 0;*/
        /*    margin: 0;*/
        /*}*/

        /*div {*/
        /*    position: fixed;*/
        /*    left: 0;*/
        /*    top: 0;*/
        /*    right: 0;*/
        /*    height: 60px;*/
        /*    border-bottom: solid 5px blueviolet;*/
        /*    box-shadow: 0 5px 10px #555;*/
        /*    background-color: white;*/
        /*    !*增加层级*!*/
        /*    z-index: 9999;*/
        /*}*/

        /*article {*/
        /*    !*后出现的定位权重高，把前面的定位盖住*!*/
        /*    position: relative;*/
        /*    height: 3000px;*/
        /*    background-color: greenyellow;*/
        /*    margin-top: 80px;*/
        /*}*/

        /*11.粘性定位*/
        /*position: sticky粘性定位，在最近的祖元素有溢出滚动设置时有效，配合top等设置使用*/
        /*设置粘性的定位的元素如果在同级，则呈现叠加效果；如果在不同级，则前一个会被后一个顶走*/
       /* body {*/
       /*     padding: 50px;*/
       /*     margin: 50px;*/
       /* }*/

       /* div {*/
       /*     width: 400px;*/
       /*     height: 200px;*/
       /*     border: 6px solid cornflowerblue;*/
       /*     overflow: scroll;*/
       /* }*/

       /* div h2:nth-of-type(even) {*/
       /*     background-color: #333;*/
       /* }*/

       /*div h2 {*/
       /*    background-color: blueviolet;*/
       /*    color: white;*/
       /*    position: sticky;*/
       /*    top: 0;*/
       /* }*/

       /*div p {*/
       /*    padding-bottom: 50px;*/
       /*}*/

    </style>
</head>
<body>
<!--1.使用相对定位操作元素-->
<!--<div>-->
<!--    <img src="flower.jpg" alt="flower.jpg" />-->
<!--    Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开-->
<!--    发的一种静态强类型、编译型语言。Go 语言语法与 C 相近，但功能上有：内存安全，GC（垃圾回-->
<!--    收），结构形态及 CSP-style 并发计算。罗伯特·格瑞史莫（Robert Griesemer），罗勃·派-->
<!--    克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance T-->
<!--    aylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推-->
<!--    出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下-->
<!--    的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016 年最佳语言”。 目前，Go每半-->
<!--    年发布一个二级版本（即从a.x升级到a.y）。-->
<!--</div>-->

<!--2.使用绝对定位操作元素-->
<!--<div>-->
<!--    <img src="flower.jpg" alt="flower.jpg" />-->
<!--    Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开-->
<!--    发的一种静态强类型、编译型语言。Go 语言语法与 C 相近，但功能上有：内存安全，GC（垃圾回-->
<!--    收），结构形态及 CSP-style 并发计算。罗伯特·格瑞史莫（Robert Griesemer），罗勃·派-->
<!--    克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance T-->
<!--    aylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推-->
<!--    出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下-->
<!--    的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016 年最佳语言”。 目前，Go每半-->
<!--    年发布一个二级版本（即从a.x升级到a.y）。-->
<!--</div>-->

<!--3.通过定位设置尺寸-->
<!--<article>-->
<!--    <div></div>-->
<!--</article>-->

<!--4.控制元素居中定位的几种方式-->
<!--<article>-->
<!--    <div></div>-->
<!--</article>-->

<!--5.多级定位的注意事项-->
<!--<article>-->
<!--    <section>-->
<!--        <div></div>-->
<!--    </section>-->
<!--</article>-->

<!--6.滚动对定位元素的影响-->
<!--<article>-->
<!--    <section>-->
<!--        <div></div>-->
<!--    </section>-->
<!--</article>-->

<!--7.图标定位案例操作-->
<!--<ul>-->
<!--    <li>-->
<!--        <span>热</span>-->
<!--        <img src="flower.jpg" alt="flower.jpg">-->
<!--    </li>-->
<!--</ul>-->

<!--8.定位叠加很重要-->
<!--<ul>-->
<!--    <li>-->
<!--        <span>热</span>-->
<!--        <img src="flower.jpg" alt="flower.jpg">-->
<!--        <div>-->
<!--            <h2>定位操作布局</h2>-->
<!--        </div>-->
<!--    </li>-->
<!--</ul>-->

<!--9.京东商城购物车部件-->
<!--<article>-->
<!--    <div>我的购物车</div>-->
<!--    <div>购物车中暂无商品</div>-->
<!--</article>-->

<!--10.固定定位-->
<!--<div></div>-->
<!--<article></article>-->

<!--11.粘性定位-->
<!--<div>-->
<!--    <h2>go语言</h2>-->
<!--    <p>-->
<!--        Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开发的一种静态强类型、编译型语言。-->
<!--    </p>-->
<!--    <h2>html语言</h2>-->
<!--    <p>-->
<!--        HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。-->
<!--    </p>-->
<!--    <h2>css语言</h2>-->
<!--    <p>-->
<!--        层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）等文件样式的计算机语言。-->
<!--    </p>-->
<!--    <h2>js语言</h2>-->
<!--    <p>-->
<!--        全面系统的讲解JAVASCRIPT（ES）编程语言，ECMASCRIPT系统课程含盖 es5 / es6 / es7 / es8 等知识点。-->
<!--    </p>-->
<!--</div>-->

</body>
</html>
复制代码

 

posted @   云起时。  阅读(35)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
· css - 09FLEX 弹性盒模型
· css - 12媒体查询响应式布局
· css 定位
· CSS定位布局
· 基础复习——项目：购物车
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 葡萄城 AI 搜索升级：DeepSeek 加持，客户体验更智能
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
点击右上角即可分享
微信分享提示
主题色彩