整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
次我们来说一下，HTML网页中的定位，有很多小伙伴一定好奇，为什么我们写的代码都是按顺序罗列的而在网页的展示效果中，我们的各种样式，标签，图片等东西都是出现在网页的各个位置，网页看起来很美观，各种盒模型摆放合理，这是因为在HTML中有定位的能力，今天我们就来学习一下。
position在英语中是位置的意思，而在我们CSS代码中position也是跟位置有关的，position有三个属性值分别为relative（相对定位：相对于自己原来的位置进行定位，但保留自己原来的位置，别的元素无法占用），absolute（绝对定位：相对于有定位的父级进行定位，如果没有则相对于文档进行定位，定位会脱离文档，不保留原来的位置，会和原来的文档不在一个层），fixed（位置定位：他的位置不会随着滑轮的滚动而改变较常见于弹窗广告，他也会脱离文档流）。
我们说完了position，接下来我们就说说他是怎么进行定位的，我们有left，top，right，bottom，五个属性分别对应 距左边，距上边，距右边，距下边，大家注意到我在每个方向前都加了个距字，我们所做的定位是距各个方向的距离而不是移动，例：left:200px，是向右移动200像素，他的意思是距离左边增加200像素。在我们实际的编程中一般都不常用bottom，我们知道，滑轮是可以一直往下滑的，所以我们相对于底部定位的话就很困难。
我们来通过代码和结果来看一下：
没有定位的样式
加了relative
加了relative的结果
上面这个结果图看着比例不太对是因为作者截图没截好[捂脸]
我们可以看出猫图片并没有移动，而是给兔子图片留着位置。
加了absolute
加了absolute的结果
这个结果我们可以看出猫图片向前移动了，并没有保留兔子图片原来的位置
加了fixed
代码中的<br>是为了使滑轮可以滑动，以便更好的展示效果。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代码样式只对兔子图片起作用，我没有给猫添加任何样式，猫图片只是作为参照物。
iv+css是现在比较流行网页排版技术，其中css的灵活运用是不可缺少的部分。在完成一些复杂的页面排版都是由最简单的排版方式演变而来的，应读者的要求今天给大家讲解一下css最基础的布局元素对齐，在css中我们可以用多种属性来实现对齐元素，如果你是技术大牛的话这篇文章就可以直接忽略了，不喜勿喷！
css中元素对齐方式有哪些？
1、块元素的对齐
块元素默认占一行，如果一行内已经出现了块元素，再添加其他块元素会自动换行的。块元素也可以嵌套其他的块元素使用，块元素一般是作为容器出现的，比如说HTML中常出现的div，块元素和行元素是可以通过css相互转换的。块元素可以使用“margin” 属性来水平对齐，可通过将左和右外边距设置为 "auto"，来对齐块元素。比如.nav{margin-left:auto;margin-right:auto;width:70%;}，如果宽度是100%则对齐没有效果，我们可以把这段代码改成.nav{margin:0 auto;}来实现导航板块内容的水平对齐。块元素存在一个外边距处理方面的 BUG会在个别浏览器出问题，使用的时候一定要注意这个问题。
2、使用 position
对齐元素的方法之一是使用绝对定位，比如说这段代码：.nav{position:absolute;right:0px;width:300px;}。但是在使用position水平对齐元素时会出现兼容问题，使用IE8之前浏览器，如果容器设置了明确宽度，忘记声明！DOCTYPE左右两侧会增加十七像素的外边距。为了避免这样问题使用 position对齐元素，一定不要忘记 !DOCTYPE声明。
3、使用float
对齐元素的另一种方法是使用 float 属性，如这段代码.right{float:right;width:300px;}，这样对齐元素也会出现浏览器兼容，，使用IE8之前浏览器，如果使用了使用 float 属性时，忘记声明！DOCTYPE左右两侧会增加十七像素的外边距，这一点和position是一样的，为了避免这样问题使用 position对齐元素，也一定不要忘记 !DOCTYPE声明。
关于“css中的元素对齐”先聊到这。每天学习一个知识点，每日寄语”不管有多少面墙阻挡，总还有一道属于你的明媚阳光。”如转载清标明出处。
position:fixed;用我自己的话来说，就是让你想要固定的东西固定。例如：
<!DOCTYPE html>
<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>
对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程， 还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。
当我下拉时，图片的位置是不会动的。即使下滑到了最底部，图片的位置也是固定的。对比下面这张图：
子绝父相就是指子元素设置绝对定位，而父元素设置相对定位。换句话说：如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。
实操代码理解
<!DOCTYPE html>
<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）。
position: absolute;查找定位的参照物方法：
从当前元素开始往上找，直到找到一个具有定位属性的元素为准，以这个元素为参照进行定位。
如果没有一个元素有定位属性,最终就参照body进行定位。（我一直理解的就是绝对定位就是你想定哪里定哪里）
定位的时候：结合top left right bottom 这四个方向属性进行配合定位。但是要注意：不能同时选择left喝right
注意：这里要区别于相对定位，在使用相对定位时，无论是否进行移动，原来的位置就没有了。
<!DOCTYPE html>
<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时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意，在使用相对定位时，无论是否进行移动，原来的位置始终保留着。
<!DOCTYPE html>
<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>原文链接：https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741
作者：我一个超级无敌可爱的人鸭
出处：CSDN
*请认真填写需求信息，我们会在24小时内与您取得联系。
