站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

深入浅析了解CSS中定位布局的细节

时间:2021-12-25 [网络编程]作者:fabuyuan 浏览:9 次

本篇文章给大家带来了css定位布局的相关知识,下面我们就来看一下什么是相对定位、绝对定位以及固定定位不同的元素性质与用途等知识,希望对大家有帮助。

深入浅析了解CSS中定位布局的细节  2

1. 相对定位

1.1) 什么是相对定位

相对定位:盒子可以根据自己原来的位置进行位置调整(通过位置描述词实现)。

位置描述词:
left: 向右移动; right 向左移动;top 向下移动;bottom 向上移动
(当里面值为负数的时候,往相反方向移动)

举个例子:
原来:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style></head><body>
    <p>
    	<p></p>
    </p></body></html>

深入浅析了解CSS中定位布局的细节  2
将 p 设置成相对定位:

p {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: relative;
    top: 50px;
    left: 50px;}

深入浅析了解CSS中定位布局的细节  2

1.2)相对定位的性质与用途

性质

  • 相对定位的元素,本质上仍在原来的位置,只不过在新的地方渲染出现,不会对页面其它元素产生影响。

用途

  • 用来微调元素位置
  • 相对定位的盒子可以用来做绝对定位的参考盒子

举个例子:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        nav {
            width: 780px;
            height: 50px;
            margin: 40px auto;
        }

        nav ul {
            list-style: none;
        }

        nav ul li {
            float: left;
            width: 156px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        nav ul li a {
            display: block;
            width: 156px;
            height: 50px;
            background-color: lightcyan;
            color: #000;
            text-decoration: none;
        }

        nav ul li a:hover {
            border-top: 3px solid red;
        }
    </style></head><body>
    <nav>
        <ul>
            <li>
                <a href="#">导航一</a>
            </li>
            <li>
                <a href="#">导航二</a>
            </li>
            <li>
                <a href="#">导航三</a>
            </li>
            <li>
                <a href="#">导航四</a>
            </li>
            <li>
                <a href="#">导航五</a>
            </li>
        </ul>
    </nav></body></html>

这个时候效果是这样:
深入浅析了解CSS中定位布局的细节  2
会发现鼠标悬浮在上面的时候,导航那一块区域都会下沉
我们给它设置了相对定位并微调之后:

nav ul li a:hover {
    border-top: 3px solid red;
    position: relative;
    top: -3px;}

深入浅析了解CSS中定位布局的细节  2
这样就可以解决刚刚的问题了


2. 绝对定位

2.1) 什么是绝对定位

绝对定位:盒子以坐标进行位置描述,拥有自己绝对位置。

绝对定位的参考盒子:
绝对定位的盒子会以自己的祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点。

这个盒子通常是相对定位的,所以也被称作 “子绝父相”。

位置描述词:
left:到左边的距离;right:到右边的距离;top:到上边的距离;bottom:到下边的距离

举个例子:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: absolute;
            width: 500px;
            height: 300px;
            left: 200px;
            top: 100px;
            background-color: antiquewhite;
        }
    </style></head><body>
    <p class="box">
    </p></body></html>

2.2)绝对定位的性质与用途

绝对定位的盒子垂直居中:

.box {
	position: absolute;
	top: 50%;
	margin-top: -自己高度一半;}

绝对定位的盒子水平居中:

.box {
	position: absolute;
	left: 50%;
	margin-left: -自己宽度一半;}
  • 堆叠顺序 z-index 属性

设置绝对定位元素的压叠顺序.
是一个没有单位的正整数,数值大的能够压住数值小的(即数值大的显示在上层)

举个例子:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 100px;
            top: 100px;
            background-color: antiquewhite;
        }

        .box2 {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 200px;
            top: 200px;
            background-color: lightblue;
        }
    </style></head><body>
    <p class="box1"></p>
    <p class="box2"></p></body></html>

此时效果如下:


这个时候我们想让box1显示在上层,就设置一个z-index 属性。

.box1 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 100px;
    top: 100px;
    background-color: antiquewhite;
    z-index: 100;}.box2 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 200px;
    top: 200px;
    background-color: lightblue;
    z-index: 1;}

看看效果:
深入浅析了解CSS中定位布局的细节  2

  • 用途

绝对定位用来“压盖”,“遮罩”的效果
可以结合 CSS 精灵使用
可以结合 JS 实现一些动画

3. 固定定位

3.1) 什么是固定定位

固定定位:不管页面如何滚动,它永远以页面为参考点,固定在那里。

位置描述词:
left:到左边的距离;right:到右边的距离;top:到上边的距离;bottom:到下边的距离

.box {
	position: fixed;
	top: 100px;
	left: 100px;}

3.2)固定定位的性质与用途

可以用来实现一些元素要一直浮现在当前窗口前,比如浏览一个页面时的返回顶部按钮,会一直出现在当前页面的某个位置

举个例子:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            background-color: rgba(78, 209, 226, 0.5);
            
            cursor: pointer;
            font-size: 24px;
        }
    </style></head><body>
    <a class="box">^</a>
    <p>
        <img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
    </p>
    <p>
        <img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
    </p>
    <p>
        <img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
    </p></body></html>

效果如下:
当页面到下方时,右下角返回顶部的按钮位置不变。
深入浅析了解CSS中定位布局的细节  2

大家感兴趣的话,可以继续访问:css视频教程

以上就是深入浅析了解CSS中定位布局的细节的详细内容,更多请关注站长家园其它相关文章!

本文标签:  CSS

转载请注明来源:深入浅析了解CSS中定位布局的细节

本文永久链接地址:https://www.adminjie.com/post/6803.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • html如何给背景图片设置透明度

      html如何给背景图片设置透明度

      html给背景图片设置透明度的方法:1、使用opacity属性,给设置背景图片的元素添加“opacity:透明度值;”样式即可;2、使用filter属性,给设置...

    • HTML里怎么设置thead表头的颜色

      HTML里怎么设置thead表头的颜色

      HTML中设置thead表头颜色的方法:1、使用“thead{color:颜色值;}”语句设置表头的字体颜色;2、使用"thead{background:...

    • 演示文稿储存以后默认的文件扩展名是什么

      演示文稿储存以后默认的文件扩展名是什么

      演示文稿储存以后默认的文件扩展名是ppt,一套完整的演示文稿文件一般包含片头动画、PPT封面、前言、目录、过渡页、图表页、图片页、文字页、封底、片尾动画等。本文...

    • oracle中not的用法是什么

      oracle中not的用法是什么

      在oracle中,not用于对指定的条件取反,当指定的条件为真时,not的结果就是假,当指定的条件为假时,not的结果就是真,语法为“Selectwhere...

    • Vue3中5个可以提高开发效率的小知识【整理分享】

      Vue3中5个可以提高开发效率的小知识【整理分享】

      本篇文章给大家聊聊Vue3开发,整理分享5个可以提高开发效率的小知识,让你在Vue3的项目开发中更加丝滑,希望对大家有所帮助!最近鼓捣了一下Vue3+...

    热门文章