定位

定位	内容
静态定位	position:static;
`固定`定位	position:`fixed;`
`相对`定位	position:`relative`;
`绝对`定位	position:`absolute`;
粘性定位	position:sticky;

解释 :

静态定位 :HTML元素的默认值,即没有定位,遵循正常的文档流对象
              静态定位的元素不会受到top,bottom,left,right的影响
固定定位 : Fixed定位在 IE7和IE8下需要描述 !DOCTYPE才能支持
                Fixed定位使元素的位置与文档流无关.因此不占据空间
                Fixed定位的元素和其他元素重叠
相对定位 : 相对定位元素的定位是相对其正常位置
                移动相对定位元素.但它原来所占的空间不会改变
绝对定位 : 绝对定位的元素的位置相对于最近的已定位父元素.如果元素没有已定位的父元素,
                那么它的位置相对于<html>
                absolute定位使元素的位置与文档流无关.因此不占据空间
                absolute定位的元素和其他元素重叠

overflow

visible 默认值.内容不会被修剪.会呈现在元素框之外
hidden 内容会被修剪,并且其余内容使不可见的
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto 如果内容会被修剪,则浏览器会显示滚动条以便查看其余内容

定位及overflow相关推荐

前端笔记html+css+vue, 页面布局、定位、字体背景等和一些常用方法
目录弹性布局: 定位: overflow溢出: 表单: vue数据存取: vuex store 全局数据: vux弹窗,软提示,硬提示 ElementUI MessageBox 弹框简单用法背景设 ...
《CSS世界》读书笔记（十一）
激进的margin属性 margin与元素尺寸以及相关布局元素尺寸 border box尺寸,对应jQuery中的$().outerWidth()和$().outerHeight()方法,在原生DO ...
javascript小游戏_javaScript小游戏——网页版别踩白块
一项目简介主要知识点:JavaScript.HTML.CSS 这是一个主要用JS实现的网页版小游戏,游戏规则很简单,通过点击不断下落的黑块来消灭它并获取分数,如果不幸黑块掉落下来或点到了白色区域那 ...
浏览器原生支持平滑滚动
原文地址:www.zhangxinxu.com/wordpress/?- 浏览器从去年年底开始,已经开始支持浏览器的原生平滑滚动定位,CSS scroll-behavior属性和JS scrollIn ...
用html画一个企鹅图案的代码,6张思维导图，帮你搞定html、css（css画QQ企鹅）
想要思维导图原图的小伙伴 ,请关注公众账号"码农范er",输入关键字,"HTML思维导图",获取文件链接. 先给大家看一张喜欢的图片,缓解下心情,最近敲敲代码 ...
PC端的一些简单适配
PC端的一些简单适配不同比例的屏幕需要展示的内容一样 16:9 24:9 32:9的屏幕比例需要显示同样的内容主要是使用的是rem布局, 这里通过调节不同分辨率的时候, 左边盒子和中间盒子的宽度比 ...
计算机基础语言学习线路图
计算机基础语言学习线路图 HTML HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用元素 H ...
web 前端学习线路图
web 前端学习线路图一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...
CSS—清除浮动的几种方式
什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版.浮动只有左右浮动.2--浮动元素A的位置与上一个元素有关系.如果上一个元素有浮动,则A的顶部与上一个元素顶部对 ...

定位及overflow

定位

overflow

定位及overflow相关推荐

最新文章

热门文章