在Css上吃过的亏

一、前言

  • 最近参加了公司的一个小程序的开发项目,虽然很简单,但是非常急三天就要交。本来就是实习生加上前端不熟练的我,最终在Css定位上吃了很大的亏。今天就来了解一下Css中的几个定位。

二、什么是定位

  • 在Css中有一个position属性,代表定位,它有四个值,可以通过设置它的TLBR来调整元素位置
    • absolute(绝对)(脱离文档流)
    • relative(相对)(不脱离文档流)
    • fixed(固定)(脱离文档流)
    • sticky(粘性)(不脱离文档流)

三、文档流

  • 想要清楚了解定位,就脱离不开文档流。
    • 字面意思就是元素从上到下,从左到右,该在什么位置就在什么位置。
    • 正常文档流是在我们没有刻意是控制它的时候,每个元素排放在文档都会按顺序排放
    • 脱离文档流就是指它所显示的位置和文档代码就不一定一致了,刻意通过Css控制它来修改它的位置

四、不同定位的作用

1、absolute

  1. 首先第一点,它会脱离文档流,基本上可以理解为,它可以根据给予它的Css来调整自身的位置,而不会根据文档流的顺序来排放
  2. 即便它会脱离文档流,但absolute,定位依据是定位元素的父级,也就是如果它的父级有设置定位,那么它将根据它的父级元素来进行脱离文档流的位置调整
  3. 当它的所有父级元素都没有设置定位时,它将根据body进行定位

2、relative

  1. 不脱离文档流,在文档流本身排放自身元素的位置上,进行Css位置调整

3、fixed

  1. 脱离文档流,不再区分块元素、行内元素、行内块元素,固定定位不占有原来的位置
  2. 固定在浏览器页面上,不随浏览器的滚动而改变位置
  3. 以浏览器为参照物,和父元素没有任何关系

4、sticky

  1. 和fixed一样,以浏览器为参照物
  2. 元素不会脱离文档流,占有原来位置
  3. 粘滞定位可以在元素到达某个位置时,将其固定
  4. 没有达到top值之前正常显示,达到top值之后类似于固定定位,不会跟随滚动条滚动而滚动

五、举例

1、代码

Html页面

DOCTYPE html>
<html style="background-color: beige;">
	<head>
		<meta charset="utf-8" />
		<title>title>
		<link rel="stylesheet" type="text/css" href="./css/index.css">
	head>
	<body>
		<div style="background-color: black; width: 100px; height: 100px;" class="div1">div>
		
		<div style="background-color: aqua; width: 100px;height: 100px;" class="div2">div>
		
		<div style="background-color: red; width: 100px;height: 100px;" class="div3">div>
	body>
html>

Css页面

.div1{
	position: relative;
	left: 20px;
	top: 20px;
	
}

.div2{
	position: absolute;
	top: 40px;
	left: 100px;
}

.div3{
	position: relative;
	
}

2、结果图

在Css上吃过的亏_第1张图片

3、分析

  1. 黑色为div1,青蓝色为div2,红色为div3
  2. 这里可以看到青蓝色的div定位为absolute,是脱离文档流的,这里因为他的父级都没有,所以直接根据body进行定位
  3. 可以看出absolute和fixed的区别,他们同样脱离文档流,但以下是不同点
    • absolute:根据它的父级元素的定位,但前提是它的父级元素有定位,如果所有父级元素都没有定位,那么将根据body进行定位
    • fixed:以浏览器为参照物,和父元素没有任何关系
  4. relative就是一个很乖的定位,原原本本的按照属于它的位置进行排放,这里可以看出,黑色板块即便设置了设置了偏移量,但下面红色的板块却照常摆放,就是因为两者都为relative,黑色板块只是设置了偏移量,它的本身还是在它原先的位置,因此红色板块才会那样显示

4、补充

为了更好的理解absolute定位,这里增加了一个div,方便理解

DOCTYPE html>
<html style="background-color: beige;">
	<head>
		<meta charset="utf-8" />
		<title>title>
		<link rel="stylesheet" type="text/css" href="./css/index.css">
	head>
	<body>
		<div style="background-color: black; width: 100px; height: 100px;" class="div1">div>
		
		<div style="background-color: black; width: 500px; height: 500px;" class="div4">
			<div style="background-color: aqua; width: 100px;height: 100px;" class="div2">div>
		div>
		
		<div style="background-color: red; width: 100px;height: 100px;" class="div3">div>
	body>
html>
.div1{
	position: relative;
	left: 20px;
	top: 20px;
	
}
.div4{
	position: absolute;
	left: 500px; 
	top: 200px; 
}
.div2{
	position: absolute;
	top: 40px;
	left: 100px;
}
.div3{
	position: relative;
	
}

在Css上吃过的亏_第2张图片

说明:

  • 可以看到大的黑色板块和青蓝色板块是脱离文档流的,所以根本不会影响另外两个
  • 而青蓝色是被包含在黑色里的,这里的黑色同样设置了absolute,因此它会在黑色板块里进行原先设置的定位
  • 不管大的黑色设置什么定位属性,青蓝色都会被影响到
  • 如果大的黑色设置的是不脱离文档流的属性,则小的黑色和红色会被影响

你可能感兴趣的:(css,前端,html)