黑马程序员前端-HTML+CSS之定位(position)的应用

Posted 黑马程序员官方

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了黑马程序员前端-HTML+CSS之定位(position)的应用相关的知识,希望对你有一定的参考价值。

 前端学习笔记教程不定期更新中,传送门:

下面开始继续更新内容,前面链接大家用来查漏补缺哦。
 

一、固定定位小技巧

固定在版心左侧位置。

小算法:

1.让固定定位的盒子 left: 50%. 走到浏览器可视区(也可以看做版心) 的一半位置。

2.让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

<img src='images/1571388901848.png' width='350'>

<img src='images/1571389108805.png' width='300'>

案例效果:

<style>
        .w 
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        
        .fixed 
            position: fixed;
            /* 1. 走浏览器宽度的一半 */
            left: 50%;
            /* 2. 利用margin 走版心盒子宽度的一半距离 */
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
  
</body>

二、堆叠顺序(z-index)

  • 在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)
  • 语法:

选择器 z-index: 1;

  • z-index 的特性如下:
  1. 属性值正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上;
  2. 如果属性值相同,则按照书写顺序,后来居上
  3. 数字后面不能加单位

注意z-index 只能应用于相对定位、绝对定位固定定位的元素,其他标准流、浮动静态定位无效。

  • 应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示:

三、定位(position)的扩展

3.1 绝对定位的盒子居中

注意:加了 绝对定位/固定定位的盒子不能通过设置margin: auto  设置水平居中
但是可以通过以下计算方法实现水平和垂直居中,可以按照下图的方法:

  1. left: 50%;:让盒子的左侧移动到父级元素的水平中心位置
  2. margin-left: -100px;:让盒子向左移动自身宽度的一半

盒子居中定位示意图

4.2 定位特殊特性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。

前面我们讲过, display 是 显示模式, 可以改变显示模式有以下方式:

  • 可以用inline-block 转换为行内块
  • 可以用浮动 float 默认转换为行内块(类似,并不完全一样,因为浮动是脱标的)
  • 绝对定位和固定定位也和浮动类似, 默认转换的特性 转换为行内块。

所以说, 一个行内的盒子,如果加了浮动固定定位和绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等。

4.3 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。 (我们以前是用padding border overflow解决的)

也就是说,我们给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题了。

4.4 绝对定位(固定定位)会完全压住盒子

浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)

但是绝对定位(固定定位) 会压住下面标准流所有的内容。

浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素


2022年前端学习路线图:课程、源码、笔记,技术栈
欢迎小伙伴们留言哦,期待看到大家的进步。另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我。

以上是关于黑马程序员前端-HTML+CSS之定位(position)的应用的主要内容,如果未能解决你的问题,请参考以下文章

黑马程序员前端-CSS练手之学成在线页面制作

黑马程序员前端-CSS之浮动知识点汇总

黑马程序员前端-CSS之圆角边框盒子阴影文字阴影

黑马程序员前端-CSS之emmet语法

黑马程序员前端-CSS前端基础了解PS切图

黑马程序员前端-CSS综合案例:学成在线模块添加