如何在css中设置位置属性值 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关如何在css中设置位置属性值,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

首先是不设置位置属性,可以看到两元素的最大的属性并未生效,而颜色属性是有效的,当前位置是默认文档流中的位置,以此为原型对比位置改变时的元素位置的变化。

& lt; ! DOCTYPE html> 　　　　& lt; html lang=癳n"祝辞　　　　& lt; head> 　　　　,,,& lt; meta charset=癠TF-8"比; 　　　　,,,& lt; link rel=皊tylesheet", href=https://www.yisu.com/zixun/薄?j.css”> 　　　　头　　　　身体<> 　　　　

之一　　　　

两个　　　　

四　　　　

　　　　身体　　　　

 .box  {
　　,,,显示:,inline-block;
　　
　　,,,背景:,红色;
　　,,,颜色:,白色;
　　,,}
　　,,
　　# two {才能
　　,,,:,260 px;
　　,,,底部:,126 px;
　　,,,左:,20 px;
　　,,,背景:,蓝色;
　　以前,,}   
  <强>位置:静态 
 在# 2的类下添加位置:静态;如下(后面每处只修改位置的值)
  # two  {
　　,,,位置:静态;
　　,,,:,260 px;
　　,,,底部:,126 px;
　　,,,左:,20 px;
　　,,,背景:,蓝色;
　　  }

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。

这个值既然会使定位属性失效，那么它存在的意义是什么的？

在网页样式修改的过程中，可以暂时的屏蔽某些元素的位置信息，或者在修改的时候，保留，某些部分的位置信息，便于恢复。

position：relative

相对定位，相对与原来正常文档流的位置定位，但是在定位时不改变原来的页面布局，既是相当于只是把定位的元素进行了移动，而移动的对比标准位置就是正常文档流中的位置，而原来的位置会留白。

position ：absolute

绝对定位，该元素将从普通文档流中删除，并且不会为页面布局中的元素创建空间。他相对于最近已定位的父元素定位。例子中即是根据body元素来定位的。

position ：fixed

固定定位，所谓固定定位和绝对定位相似，一样都会从普通文档流中删除，并且不会为页面布局中的元素创建空间；不一样的是它是固定在视窗上的，是以视窗为定位对象的的，相信大家浏览很多网页时都有这样的感受，网页上部或者下部会有广告不会随着网页的上下滚动而移动，它们是固定在网页上的，并且如果没有设置z-index来修该叠放次序，它们会覆盖网页的内容。