前端系列之CSS（定位）

最新推荐文章于 2024-04-12 05:28:38 发布
最新推荐文章于 2024-04-12 05:28:38 发布
阅读量271 收藏
点赞数
分类专栏： 前端 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wtdask/article/details/79108132
版权

一.position属性

HTML中的三种常用的布局方式
* 标准流
* 浮动
* 定位

两大元素：
* 块级元素：div h1-h6 ol uil li table p
* 内联元素:a span img input

这里写图片描述

这里写图片描述

relative相对定位 absolute绝对定位 fixed固定定位，脱离正常的文档流 inherit继承定位

二.z-index

这里写图片描述

三.案例-侧边栏导航跟随案例

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .page {
            width: 100%;
            height: 4043px;
            background: url("image/banner.png") center top no-repeat;
        }

        .nav {
            width: 160px;
            height: 205px;
            position: fixed;
            left: 0;
            top: 50%;
            margin-top: -103px;
            font-family: 'Microsoft Sans Serif';
        }

        .tit{
            width: 160px;
            height: 40px;
        }
        .nav-li:hover ul{
            display: block;
        }
        .nav-li {
            width: 160px;
            height: auto;
            border-bottom: 1px solid #fff;
            background: #333333;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

        .nav-li ul{
            width: 160px;
            height: auto;
            background: #ffffff;
            display: none;
        }
        .nav-li ul li{
            width: 160px;
            height: 40px;
            border-bottom: 1px dashed #666;
            color: #333;
            text-align: center;
            line-height: 40px;
            position: relative;
        }

        .nav-li ul li:hover .list-3{
            display: block;
        }

        .list-3{
            width: 160px;
            height: auto;
            position: absolute;
            left: 160px;
            top: 0px;
            display: none;
        }

        .list-3Dom{
            width: 160px;
            height: 40px;
            background: #444;
            border-bottom: 1px solid #ffffff;
            text-align: center;
            line-height: 40px;
            color: #ffffff;
        }


    </style>
</head>
<body>
<div class="page">
    <div class="nav">
        <div class="nav-li">
            <div class="tit">慕课网的标题</div>
            <ul>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="nav-li">
            慕课网的标题
            <ul>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="nav-li">
            慕课网的标题
            <ul>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="nav-li">
            慕课网的标题
            <ul>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="nav-li">
            慕课网的标题
            <ul>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
            </ul>
        </div>

    </div>
</body>
</html>
众拾达人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端知识之CSS常用技巧荟萃.pdf
09-20
在前端开发中，CSS是构建用户界面不可或缺的一部分，它提供了丰富的样式和布局技巧。这篇文档主要探讨了CSS中的一些常用技巧，特别是如何实现缺角矩形、折角矩形以及缺角边框，这些都是现代网页设计中常见的视觉效果...
【前端】CSS定位
qq_45764950的博客
11-03 351
在使用定位布局时，可能会出现盒子重叠的情况。此时，就可以使用z-index来控制盒子的前后次序（z轴）选择器 { z-index: 1;}数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上如果属性值相同，则按照书写顺序，后来居上数字后面不能加单位只有定位的盒子才有z-index属性通过盒子模型，清楚知道大部分html标签是一个盒子。通过CSS浮动、定位可以让每个盒子排列成为网页。一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。1、标准流。
【前端】深入理解CSS定位
山赶着山，山山漫漫结成关
08-18 3270
CSS定位是用来控制元素在页面上的位置和排列方式的技术。普通流、浮动流、定位流，其中定位流包括相对定位、绝对定位和固定定位。普通流：元素默认从上至下或者从左至右的排序顺序浮动流：添加了浮动的元素定位流：添加了定位的元素，包括相对定位、绝对定位、固定定位接下来，博主会从CSS定位、CSS边偏移、元素的显示与隐藏，这三部分进行讲解静态定位是元素的默认定位方式，无定位的意思#静态定位语法相对定位是元素在移动位置时，是相对于它原来的位置来说的#相对定位语法绝对定位。
【web前端开发】CSS定位
云泽野の编程日记
04-21 1615
定位有两个作用:1.可以解决盒子和盒子之间的层叠问题(定位之后元素层级最高,可以层叠在其它盒子上面)2.可以让盒子始终固定在屏幕中的某个位置属性名:position定位方式属性值静态定位static相对定位relative绝对定位absolute固定定位fixedps: 这四个取值中第一个就是不定位,加和不加都是一个效果.设置position只是设置定位的方式.除了定位方式还要设置偏移值偏移值设置分为两个方向(水平和垂直方向)方向属性名属性值含义水平left。
CSS五种定位方式详解
wshwsh_的博客
07-26 4104
position 属性规定应用于元素的定位方法的类型。
前端——CSS中常用的定位方式
Bingtangbgd的博客
07-03 1475
前端——CSS中常用的定位方式
HTML5前端开发之CSS基础源码
03-17
这个“HTML5前端开发之CSS基础源码”主题深入探讨了CSS的基本概念、语法以及如何应用于实际项目中。下面我们将详细讨论相关的CSS知识点。 1. CSS基本概念： CSS是一种用于定义HTML或XML（包括如SVG、MathML等各种...
前端练习代码之css2.1
04-12
这个名为"前端练习代码之css2.1"的压缩包文件，显然是为初学者或者正在进阶的前端开发者设计的一系列练习项目，旨在帮助他们深入理解和熟练应用CSS2.1规范。CSS2.1是CSS的一个关键版本，它在2011年成为W3C推荐标准，...
Tedu前端部分CSS+HTML
02-06
CSS选择器用于定位HTML元素，如`#id`选择具有特定ID的元素，`.class`选择具有特定类的元素，`tag`选择特定类型的标签。此外，CSS还支持层叠规则，这意味着如果一个元素同时受到多个样式声明的影响，浏览器会根据...
前端入门html和css布局
07-20
3. 网格布局（Grid Layout）：CSS Grid提供了一种二维布局系统，允许我们轻松地创建网格，并将内容定位在网格的不同单元格中。这对于创建复杂的、响应式的布局非常有用。 4. 弹性盒布局（Flexbox Layout）：Flexbox...
css中的定位详解
最新发布
2301_79098873的博客
04-12 1514
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-4xTVD5ff-1712870874187)][外链图片转存中…(img-BZIpnsYf-1712870874187)]
css中的定位详解，27岁学前端开发
2401_84091243的博客
04-03 873
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取[外链图片转存中…(img-fERSzdT7-1712090268267)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-uV6acKM2-1712090268268)]
前端——css相对定位，绝对定位，固定定位
起风了
02-03 8295
文章目录相对定位 position: relative;特性用途绝对定位 position: absolute;绝对定位参考点单独盒子绝对定位参考点：父辈元素设置了相对定位，则子元素绝对定位以父辈元素为参考点。绝对定位水平居中固定定位参考点 相对定位 position: relative; &lt;style type="text/css"&gt; .box1{ width: 200p...
前端css的三种定位
qq_39571602的博客
09-11 1120
第一种，fixed 从脱离文档流，相对于屏幕的定位 第二种，absolute 从文档流中脱离，相对一父元素的relative定位，通过设置top,left,right,bottom来定位 第三种，relative 保持原来在文档流中的位置，相对于自身正常流中的位置的定位，也是通过设置top等属性来定位  ...
前端学习——css定位
RX1125的博客
01-30 502
前端学习——css定位1.学习内容2.成果展示 1.学习内容 主要学习css高级运用,掌握更多修饰技巧,增强网页可读性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京吃食府2.0</title> <link rel="shortcut icon" href="favicon.ico" type="image/x
前端css：定位
elktime的博客
08-02 164
定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子定位也是用来布局的，它有两部分组成：定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。语法： 静态定位 按照标准流特性摆放位置，它没有边偏移。静态定位在布局时我们几乎不用的
CSS的四种定位方式
热门推荐
jhfvuyhgui的博客
03-31 1万+
CSS的四种定位方式 1.静态定位： 设置方式为position: static;静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。 2.相对定位： 设置方式为position: relative;相对定位的盒子脱离了标准流，盒子的层级高于标准流和浮动 ...
CSS中常用的几种定位方式
itHeima_Liu的博客
05-16 8034
CSS中常用的几种定位方式 第一类 float定位（即浮动定位）： 这种定位方式很简单，只需规定一个浮动的方向（如：float:left;就表示这个元素向左边摆放），它的定位是相对于父元素容器； 如果该元素设置了浮动，后面紧邻的则会受到浮动的影响，因此需要后面的元素若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相
目前最火的前端布局方式：less+rem+媒体查询
bigpatten的博客
02-10 3465
1. rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小，rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体...
提升前端设计：CSS规范最佳实践全解析
前端开发中，掌握一套有效的CSS样式规范至关重要。这份指南详细介绍了编写出高质量网页设计的最佳实践，旨在帮助开发者提升前端技能，打造专业级的网页体验。以下是一些关键知识点： 1. **样式属性顺序**： - 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值