CSS新手入门笔记整理:CSS定位布局

这篇具有很好参考价值的文章主要介绍了CSS新手入门笔记整理:CSS定位布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

定位布局概述

浮动布局比较灵活,但是不容易控制。而定位布局的出现,使得用户精准定位页面中的任意元素成为可能。当然了,由于定位布局缺乏灵活性,这给空间大小和位置不确定的版面布局带来困惑。因此在实际开发中,大家应该灵活使用这两种布局方式,这样才可以更好地满足开发需求。

语法

position:取值;

属性

说明

fixed

固定定位

relative

相对定位

absolute

绝对定位

static

静态定位(默认值)


固定定位:fixed

所谓的固定定位,指的是被固定的元素不会随着滚动条的拖动而改变位置。

语法

position:fixed;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
  • 先使用“position:fixed”让元素成为固定定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。(一般只会用到其中两个top和left)这4个值的参考对象是浏览器的4条边。

相对定位:relative

所谓的相对定位,指的是该元素的位置是相对于它的原始位置计算而来的。

语法

position:relative;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;

先使用“position:relative;”让元素成为相对定位元素,接着使用top、bottom、left和right这4个属性来设置元素的相对定位。(一般只会用到其中两个top和left)


绝对定位:absolute

  • 绝对定位是相对于浏览器的,能够很精确地把元素定位到任意想要的位置。
  • 一个元素变成了绝对定位元素,这个元素就完全脱离文档流了,绝对定位元素的前面或后面的元素会认为这个元素并不存在,此时这个元素浮于其他元素上面,已经完全独立出来了。
  • position:absolute 会将元素转换为 block (块元素)。

语法

position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;

先使用“position:absolute”让元素成为绝对定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。(一般只会用到其中两个top和left)


静态定位:static

在默认情况下,元素没有指定position属性时,这个元素就是静态定位的。也就是说,元素position属性的默认值是static。一般情况用不到。

语法

position:static;

定位布局拓展

子元素相对父元素定位

语法

/*相对定位*/
父元素{position:relative;}

/*绝对对定位*/
子元素
{
 position:absolute;
 /*定义top、bottom、left和right*/
}

先给父元素定义 position:relative,然后给子元素定义 position:absolute,之后配合 top、bottom、left 和 right 来定位。这个技巧在实际开发中会大量用到,也是定位布局的精髓之一。


子元素相对祖先元素定位

语法

祖先元素{position:relative;}
子元素
{
 position:absolute;
 /*定义top、bottom、left和right*/
}

给祖先元素定义 position:relative,然后给后代元素定义 position:absolute,之后配合 top、bottom、left 和 right 来定位。父元素不可以定义position:relative。


z-index 属性

  • 网页是三维结构的,对于一个页面来说,它除了 x 轴、y 轴,还有 z 轴。其中,z 轴往往都是用来设定层的先后顺序的。
  • 在 CSS 中,我们可以使用 z-index 属性来定义z 轴的大小,从而控制元素的堆叠顺序。可以使用 z-index 属性将一个元素放置于另外一个元素的上面或下面。
  • 默认情况下,元素的 z-index 属性处于不激活状态。设置元素的 z-index 属性无效。z-index 属 性 只有在元素定义 position:relative、position:absolute 或 position:fixed 后才会被激活。

CSS新手入门笔记整理:CSS定位布局,前端新手入门笔记整理,css,前端


语法

z-index: 取值 ;

属性值

说明

auto

堆叠顺序与父元素相等(默认值)

number(数值)

可以为负整数、0 以及正整数

更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近;如果为负数,则表示离用户更远。” 如果 z-index 值相同,则遵循“后来者居上”原则来叠加。

CSS新手入门笔记整理:CSS定位布局,前端新手入门笔记整理,css,前端文章来源地址https://www.toymoban.com/news/detail-758825.html


到了这里,关于CSS新手入门笔记整理:CSS定位布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java开发环境配置“JDK”超详细整理,适合新手入门

    目录 一、什么是JDK? 二、Java中JDK8、JDK17该怎么选择? 三、JDK和JRE是什么关系? 四、JDK包含的基本组件 五、JDK下载步骤 JDK 安装 1、双击运行安装包,出现安装程序,点击下一步 2、修改JDK安装目录 3、根据提示安装完成,这就完成jdk安装了,可以直接点关闭了 JDK 环境配置

    2023年04月08日
    浏览(57)
  • HTML5+CSS3学习笔记(九)前端页面六大布局(文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局)

    本系列更多文章,可以查看专栏 HTML+CSS学习笔记 块级元素自上至下垂直排列,行内元素自左至右水平排列 块级元素独占一行,行内元素不会另起一行 默认情况下,height和width决定内容区的大小;内容区、内边距和边框构成可见区域的大小;外边距决定元素的位置 更多内容可

    2024年02月02日
    浏览(64)
  • Candence新手入门学习笔记<一>

    Candence包含两大部分:OrCAD和Allegro。OrCAD原理图设计功能强力,Allegro版图设计强劲。 Candence提供了十数多个模块,其中存在部分模块的功能重复,以下列写部分常用的核心模块。 (1)Design Entry CIS OrCAD为基础的原理图设计工具,此工具使用快捷方便、简单易懂、与其他PCB软件

    2024年02月09日
    浏览(46)
  • Vulnhub靶机渗透之新手入门 JIS-CTF入门靶场-学习笔记

    目录 学习前言 准备工作 一、寻找目标主机(信息收集) 二、敏感文件 三、Getshell上传木马 用蚁剑进行Getshell 四、寻找Linux密码进行ssh连接 五、连接SSH最后一步 六、总结 vulnhub是个提供各种漏洞平台的综合靶场,可供下载多种虚拟机进行下载,本地VM打开即可,像做游戏一样去

    2024年02月14日
    浏览(41)
  • C语言初阶——手把手教零基础/新手入门(万字心得笔记)

    目录 前言 一、C语言是什么? 二、开发环境 1.编译器 三、初始C语言 1.第一个C语言程序 2.数据类型 2.1 数据类型的长度 3. 变量 常量 3.1 如何定义变量 3.2 变量的分类  3.3 变量的作用域和生命周期 3.4常量 1.字面常量 2.const修饰的常变量  3.#define定义的标识符常量 4.枚举常量

    2024年02月03日
    浏览(93)
  • [HTML]Web前端开发技术10(HTML5、CSS3、JavaScript )CSS+DIV页面布局,固定定位,相对定位relative,绝对定位absolute,层定位的应用——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 课后练习 网页标题:固定定位 网页标题:相对定位relative 网页标题:绝对定位absolute 网页标题:层定

    2024年02月02日
    浏览(59)
  • GitHub新手用法详解【适合新手入门-建议收藏!!!】

    目录 什么是Github,为什么使用它? 一、GitHub账号的注册与登录 二、 gitbash安装详解 1.git bash的下载与安装 2.git常用命令  3. Git 和 GitHub 的绑定 1. 获取SSH keys  2.绑定ssh密钥 三、通过Git将代码提交到GitHub 1.克隆仓库   2.测试提交代码         GitHub是一个面向开源及私有软件项

    2023年04月24日
    浏览(63)
  • HLS新手入门教程

    HLS是一种高级综合技术,它允许开发人员使用高级语言(如C、C++和SystemC)来描述数字电路的行为和功能,然后将其转换为硬件电路实现。这种转换过程是自动完成的,因此开发人员无需手动编写硬件描述语言(HDL)。 HLS的主要目的是简化FPGA设计流程,提高设计效率和设计质

    2024年02月02日
    浏览(57)
  • Midjourney新手入门指南

    我们来看一下百度百科的回复 是不是有点蒙,没关系,一句话概括:用描述来生成图像的AI工具。 你可能又有一门了,discord是什么?为什么要下载它?我们来看看百度百科 原因:Midjouney 没有自己的客户端,它是搭载在Discord上。 Discord 简单来说,就是一个聊天应用。

    2024年02月10日
    浏览(73)
  • uniapp基础(新手入门)

    前言: 这篇文章主要写的是uniapp的基础知识,可以让大家快速上手uniapp,同时避掉一些可能踩到的坑。 uniapp是由 dcloud 公司开发的多端融合框架。uniapp的出现让我们的开发更为方便,一次开发,多端运行。更重要的是学习成本不会很大,因为uniapp主要是Vue语法加上小程序的

    2024年02月12日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包