css 定位脱标,CSS 定位

文章目录

定位( postion)

简介

静态定位(static)

相对定位(relative)

绝对定位(absolute)

固定定位(fixed)

四种定位总结

叠放次序(z-index)

居中布局

定位( postion)

简介

定位一种布局方式。

通过定位可以将元素摆放到页面的任意位置。

元素开启定位后，可以通过偏移量设置位置。

CSS position属性

属性

说明

static

静态定位，默认值

relative

相对定位，相对于文档流的位置进行定位

absolute

绝对定位，相对于上一个已经定位的父元素进行定位

fixed

固定定位，相对于浏览器窗口定位

边偏移

属性

说明

top

顶部偏移

bottom

顶部偏移

left

左侧偏移

right

右侧偏移

静态定位(static)

静态定位是所有元素的默认定位方式。

当position属性为static时可开启元素的静态定位

所谓静态位置指各元素在HTML文档流中默认的位置。

在静态定位下，不能通过边偏移属性改变元素的位置。

相对定位(relative)

相对定位是将元素相对于它在标准流中的位置进行定位。

当position属性为relative时可开启元素的相对定位

当元素设置为相对定位时，可以通过边偏移属性改变元素的位置，但它在文档流中的位置仍然保持继续占有。

background-color: red;

width: 100px;

height: 100px;

}

.box2 {

background-color: green;

width: 100px;

height: 100px;

position: relative;

top: -50px;

left: 50px;

}

.box3 {

background-color: blue;

width: 100px;

height: 100px;

}style>

div>

body>

绝对定位(absolute)

绝对定位的元素会脱离文档流，完全不占位置。

当position属性为absolute时可开启元素的绝对定位。

当元素为绝对定位时，可通过边偏移改变元素的位置。

父元素没有定位

若所有父元素都没有定位，则以html根元素进行定位。

父元素有定位

绝对定位是根据最近的定位父元素进行定位。

子绝父相

通常子元素为绝对定位时，父元素用相对定位。

因为子元素时绝对定位，不会占有位置，可以放在父盒子的任何地方。父元素布局时需要占有位置。

background-color: red;

width: 100px;

height: 100px;

}

.box2 {

background-color: green;

width: 100px;

height: 100px;

position: absolute;

top: 50px;

left: 150px;

}

.box3 {

background-color: blue;

width: 100px;

height: 100px;

}style>

div>

body>

固定定位(fixed)

固定定位会脱离文档流，以浏览器窗口为参照物。

当position属性为fixed时可开启元素的固定定位。

background-color: red;

width: auto;

height: 800px;

}

.box3 {

background-color: blue;

width: auto;

height: 800px;

}

.box2 {

background-color: green;

width: 100px;

height: 100px;

position: fixed;

top: 100px;

}style>

div>

这里是固定定位div>

div>

body>

四种定位总结

定位模式

是否脱标占有位置

是否可以使用边偏移

移动位置基准

static

不脱标

不可以

正常模式

relative

不脱标，占有位置

可以

相对自身位置移动

absolute

完全脱标，不占有位置

可以

相对定位父级元素位置

fixed

完全脱标，不占有位置

可以

相对于浏览器位置

叠放次序(z-index)

当多个元素同时设置定位时，元素之间会出现重叠问题。

这时可以使用z-index属性，取值越大，层叠元素越剧上。

只有相对定位、绝对定位、固定定位有该属性，其他浮动、静态定位无此属性。

语法

选择器 {

z-index: 1;

}

居中布局

方式一

.box{

background-color: red;

width: 200px;

height: 200px;

margin: 0 auto;

}

方式二

.box{

background-color: red;

width: 200px;

height: 200px;

position: absolute;

left: 50%;

margin-left: -100px;

}

方式三

.box{

background-color: red;

width: 200px;

height: 200px;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

css 定位脱标,CSS 定位相关推荐

李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素作 ...
【CSS】CSS 规避脱标之两种用法
原文链接:https://www.cnblogs.com/xiaoqiang001/p/4726910.html 我们知道我们网页布局有三模式. 普通流 normal flow (标准流.常规流 ...
CSS——规避脱标流和vertical-align
规避脱标流: 1.尽量使用标准流. 2.标准流解决不了的使用浮动. 3.浮动解决不了的使用定位. 问题解决:嵌套盒子在不使用定位的情况下定位到右上角 <!DOCTYPE html> < ...
【web前端开发 | CSS】页面布局之定位
思维导图 (案例放在文章结尾) 文章目录思维导图一:定位 1.1:静态定位(position:static:) 1.2:相对定位(position:relative:) 1.3:绝对定位(posi ...
CSS基础「五」定位
本篇文章为 CSS 基础系列笔记第五篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS（五）：定位与显示隐藏
目录定位为什么需要定位定位组成 1. 定位模式 2. 边偏移定位模式 1. 静态定位 static 2. 相对定位 relative(重要) 3. 绝对定位 absolute(重要) 4. 固 ...
WEB前端学习（7）CSS复习六（布局-定位）
1. 为什么需要定位? 1.浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子. 2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 2. ...
HTML、CSS综合04——浮动、定位、选择器
复习文本属性:text-开头的属性都可以被继承背景属性:(背景属性尤为重要) 背景颜色:background-color 背景图片:background-image 背景图片的重复方式 ...
CSS学习221~249（定位+元素的显示隐藏）
1 定位 1.1 为什么需要定位浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 1.2 ...

css 定位脱标,CSS 定位

css 定位脱标,CSS 定位相关推荐

最新文章

热门文章