定位(position)
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
top | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
2、定位模式(定位的分类)
static | 自动定位(默认定位方式) |
relative | 相对定位,相对于其原文档流的位置进行定位 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位 |
静态定位(static)
就是网页中所有元素都默认的是静态定位哦! 其实就是标准流的特性。
相对定位
相对定位是将元素相对于它在标准流中的位置进行定位,当position属性的取值为relative时,可以将元素定位于相对位置。
注意:
相对定位最重要的一点是,它可以通过边偏移移动位置,但是原来的所占的位置,继续占有。
其次,每次移动的位置,是以自己的左上角为基点移动(相对于自己来移动位置)
就是说,相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。(相对定位不脱标)
如果说浮动的主要目的是 让多个块级元素一行显示,那么定位的主要价值就是 移动位置, 让盒子到我们想要的位置上去。
绝对定位
当position属性的取值为absolute时,可以将元素的定位模式设置为绝对定位。
注意: 绝对定位最重要的一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。
若所有父元素都没有定位,以浏览器为准对齐(document文档)。
绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
定位(position)相关推荐
- 定位--position属性
一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right botto ...
- CSS基础——定位 (position)【学习笔记】
定位(position) 1. CSS 布局的三种机制 网页布局的核心 -- 就是用 CSS 来摆放盒子位置. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流.浮动和定位,其中: 普通流 ...
- 网页定位(position属性、相对定位、绝对定位、固定定位、z-index、设置透明度)
position属性 static:默认值,没有定位 relative:相对定位,相对于自己原来的位置进行偏移 absolute:绝对定位,以它最近一个已经定位的祖先元素为基准进行偏移 fixed:固 ...
- CSS——CSS定位※ ( position )
文章目录 定位(position) 为什么要用定位? 元素的定位属性 静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 1.父级没有定位 2.父级有定 ...
- 前端基础入门之css定位 position
定位的简介 需求分析 按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...
- 自学前端第十八天:CSS精准定位position
超级重点:CSS精准定位(position) 一. ①CSS定位基本概念:如果说, float浮动关键在一个 "浮起来" 字上面, 那么 我们的position定位关键在于一个 & ...
- CSS定位position总结(超详细哦!)
文章目录 前言 一.定位(position) 介绍 1.为什么使用定位 2.定位组成 二. 定位模式 (position) 1.边偏移(方位名词) 2.定位模式介绍 1.1 静态定位(static) ...
- web前端入门学习 css(6)(定位position)(元素的显示与隐藏display、可见性visibility、溢出overflow)(案例:土豆播放页)
文章目录 什么是定位? 定位组成(定位模式+边偏移) 定位模式static relative absolute fixed 边偏移 定位模式--静态定位static(平时用不到)就是标准流 定位模式- ...
- position属性:绝对定位position: absolute;相对定位 position: relative;固定定位 position: fixed;
position 属性: position常见的定位模式: 定位模式 描述 是否脱离文档流 移动模式 定位偏移属性 static 默认属性 对象遵循常规流 不移动 不移动 relative 相对定位 ...
- 前端开发_HTML5_盒子定位(position)
盒子定位(position) 1.引入 我们知道浏览器在解析html页面的时候是按照标准的文档流方式就行解析的.即html页面元素是按照从左到右.自上而下的方式进行排布(我们可以这样认为,整个页面是一 ...
最新文章
- PCL:从法线计算到曲率计算并可视化
- 数据挖掘公司D square nv 完成500万欧元B轮融资
- mysql数据库有触发器吗_MySQL数据库之MySQL 触发器实现
- 第三次小组赛解题报告
- (三)opencv_py之阈值处理
- idea mysql 创建表_idea 根据数据库表自动创建持久化类
- robot连PCwifi、PC开Shell连robot
- Java开发必看JPA概念大全
- 解压deb_Linux填坑记:很全面的解压和压缩命令集合
- 详解CSS display:inline-block的应用(转)
- 需要氪金吗_《死或生6》染发也需要氪金,海外玩家吐槽官方吃相太难看
- node.js中net网络模块TCP服务端与客户端的使用
- Win7系统主题路径
- wapp HTTP Error 404. The requested resource is not found.
- 科技巨头们在SaaS市场“雷声大雨点小”背后的症结
- 基于Redis的分布式链家二手房房源数据爬虫系统 毕业设计
- rabbitmq User can only log in via localhost
- 【博客之星】坚持,是一种信仰
- Python正则表达式-re模块奇技淫巧
- supervisord简介
热门文章
- 了解javac.exe、java.exe、javaw.exe
- Pr:导出设置之基本视频设置
- php 去除字符串中符号,如何从PHP字符串中的字符中删除重音符号?
- ios系统上input输入框无法输入值的解决办法
- BZOJ 3223 文艺平衡树
- python基础知识学习(2)
- 网红营销——中东电商平台制胜的王道之选
- 研发软件项目奖金发放制度
- python全自动模拟_数十行 Python 代码全自动刷王者荣耀金币
- asynchttpclient 超时_韩服正式服3.28版本:新手模式超时空漩涡实装amp;新竞技副本...