CSS中定位(带你实操代码掌握固定定位、绝对定位与相对定位(子绝父相))

目录

    • 固定定位
    • 绝对定位和相对定位
      • 子绝父相
      • 绝对定位
      • 相对定位
      • 绝对定位和相对定位的区别

固定定位

position:fixed;

用我自己的话来说,就是让你想要固定的东西固定。例如:


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			body{
      
				height: 2000px;
				
			}
			
			.photo{
      
				width: 600px;
				height: 600px;
				position: fixed;
				left: calc(50%-300px);
				top: calc(50%-300px);
				
			}
		style>
		
	head>
	<body>
		10月7日,昆凌在社交平台晒出自己荡秋千的美照。
		照片中,昆凌长发披肩,头戴假日风草帽,
		穿一袭白裙在海边荡着秋千,回眸甜笑,宛若仙子。
		<div id="box1">
			<img src="img/kunling.jpg" class="photo">
		div>
		
	body>
html>

CSS中定位(带你实操代码掌握固定定位、绝对定位与相对定位(子绝父相))_第1张图片
当我下拉时,图片的位置是不会动的。即使下滑到了最底部,图片的位置也是固定的。对比下面这张图:
CSS中定位(带你实操代码掌握固定定位、绝对定位与相对定位(子绝父相))_第2张图片

绝对定位和相对定位

子绝父相

子绝父相就是指子元素设置绝对定位,而父元素设置相对定位。换句话说:如果要对一个子元素使用定位的话,让子元素(绝对定位)以其父元素(相对定位)为标准来定位。

实操代码理解


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			#father{
      
				width: 300px;
				height: 300px;
				background-color: coral;
				position: relative;
				border: solid 3px red;
			}
			
			#son1{
      
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
				left: 20px;
				top: 50px;
			}
			
			#son2{
      
				width: 100px;
				height: 100px;
				background-color: chartreuse;
				position: absolute;
				left: 40px;
				top: 90px;
			}
		style>
	head>
	<body>
		
		<div id="father">
			I am father
		div>
		
		<div id="son1">
			I am son1
		div>
		
		<div id="son2">
			I am son2
		div>
		
	body>
html>


看图:在father这个容器设置了相对定位之后,son1和son2都设置了绝对定位,我们的子类这时其实不是在body中绝对定位(absolute),而是在其父类的范围中绝对定位(absolute)。
CSS中定位(带你实操代码掌握固定定位、绝对定位与相对定位(子绝父相))_第3张图片

绝对定位

position: absolute;

查找定位的参照物方法:
从当前元素开始往上找,直到找到一个具有定位属性的元素为准,以这个元素为参照进行定位。
如果没有一个元素有定位属性,最终就参照body进行定位。(我一直理解的就是绝对定位就是你想定哪里定哪里)

定位的时候:结合top left right bottom 这四个方向属性进行配合定位。但是要注意:不能同时选择left喝right

注意:这里要区别于相对定位,在使用相对定位时,无论是否进行移动,原来的位置就没有了。


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			#box1{
      
				background-color: salmon;
				width: 100px;
				height: 100px;
				position: absolute;
				left: 100px;
				top: 50px;
			}
		style>
	head>
	<body>
		<div id="box1">
			我是box1,我采用了绝对定位
		div>
		
	body>
html>

相对定位

position: relative;

相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上(即不设置position时的位置,然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动;

注意,在使用相对定位时,无论是否进行移动,原来的位置始终保留着。


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			#box1{
      
				width: 100px;
				height: 100px;
				background-color: brown;
				position: relative;
				left: 300px;
				top: 300px;
			}
			
			#box2{
      
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		style>
	head>
	<body>
		
		<div id="box1">
			
		div>
		
		<div id="box2">
			
		div>
		
	body>
html>

绝对定位和相对定位的区别

  1. 相对定位的参照物是参照物本身。
    绝对定位的参照物就是父级元素,当父级元素中不存在相对定位,那么它的参照物就是body
  2. 相对定位,设置后,原来的位置始终保留着
    绝对定位,设置后,原来的位置会被后面的内容占据

注:创作不易,转载请注明出处

https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人欢迎你的关注!
有问题可在CSDN上私信我,期待与你的一起学习

你可能感兴趣的:(安卓开发,前端,css,定位,html)