深入学习CSS中如何使用定位

CSS中定位介绍

position属性在英文单词中表示位置的意思，在CSS中主要作用设置元素的定位。
CSS中一共有3种定位如下：

属性值	描述
fixed	设置固定定位。
relative	设置相对定位。
absolute	设置绝对定位。

固定定位实践

在实践固定定位之前我们先看看代码结构是什么样子的呢。
代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{

       width: 100px;
       height: 100px;
       background-color: red;
       margin: 0;
       padding: 0;
     }
     div{
       width: 200px;
       height: 200px;
       background-color:springgreen;
        margin: 0;
        padding: 0;
     }
  </style>
</head>

<body>
   <h1 class="box"></h1>
   <div></div>
</body>

</html>

结果图

现在笔者将h1元素设置为固定定位，看看和上面的结构实践有什么区别，然后我们在分析一些固定定位的特点。
代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      position:fixed;
       width: 100px;
       height: 100px;
       background-color: red;
       margin: 0;
       padding: 0;
     }
     div{
       width: 200px;
       height: 200px;
       background-color:springgreen;
        margin: 0;
        padding: 0;
     }
  </style>
</head>

<body>
   <h1 class="box"></h1>
   <div></div>
</body>

</html>

结果图

固定定位特点分析如下：
固定定位，它是相对于浏览器窗口进行设置定位，不管页面如果滚动，固定定位的元素位置不会受到任何影响。
固定定位的元素特点：它已经脱离了标准文档流。
固定定位的元素特点：它的层级比标准文档流的元素要高，所以我们给h1标签设置了固定定位会压盖到div标签。
固定定位的元素特点：h1标签在div标签之上，所以固定定位的元素已经不再占用任何空间。

相对定位实践

在实践相对定位之前我们先看看代码结构是什么样子的呢。
代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;

     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

结果图

现在笔者将class属性值为.div2元素设置为相对定位，看看和上面的结构实践有什么区别，然后我们在分析一些相对定位的特点。
代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;

     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position: relative;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

结果图

注意：在我们没有给相对定位设置坐标位置，它是不会有任何移动的。
笔者给class属性值为div2元素设置定位坐标实践。
代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;

     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position: relative;
       left: 50px;
       top: 50px;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

结果图

相对定位特点分析如下：
相对定位的元素它没有脱离标准文档流。
相对定位的元素如果没有设置坐标它会在原地位置。
相对定位的元素设置了坐标位置，它会根据原来的位置开始计算移动的位置。
相对定位的元素它比标准文档流的元素层级要高，会覆盖标准文档流中的元素。
相对定位的元素它可以设置为负数。

绝对定位实践

在实践绝对定位之前我们先看看代码结构是什么样子的呢。
代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;

     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

结果图

现在笔者将class属性值为.div2元素设置为绝对定位，看看和上面的结构实践有什么区别，然后我们在分析一些绝对定位的特点。
代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;

     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position:absolute;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

结果图

注意：绝对定位已经脱离了标准文档流。
笔者给class属性值为div2元素设置定位坐标实践，为了让读者有一个直观的印象我给最外层的div元素设置了居中对齐。
代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      margin: 0px auto;

     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position:absolute;
       left:0px ;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

结果图

注意：绝对定位元素为什么会出现在浏览器左边缘呢，绝对定位移动原理：绝对定位的元素它会寻找父元素是否有定位，如果有定位它会根据父元素进行定位，如果父元素没有设置定位，它会在找父元素的父元素是否有定位，以此类推直到body元素就停止了，因为body元素就是浏览器的位置，说了这么多笔者给新学者一个直观的印象，那咱们就实践见真招。
代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      margin: 0px auto;
      position: relative;

     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position:absolute;
       right:0px ;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

结果图

注意：现在笔者给绝对定位坐标更换成了向右定位，父元素设置了一个相对定位，在这里就不多进行实践了，如果定位的父元素的父元素也就是爷爷的元素，父元素和爷爷元素同时都设置了定位，该元素会根据父元素决定定位而不是爷爷元素。
绝对定位特点分析如下：
绝对定位元素它已经脱离了标准文档流。
绝对定位元素它会覆盖掉标准文档流的元素。
绝对定位元素它已经不再占用任何空间了。
绝对定位元素它根据父元素之祖先元素之间是否有定位，如果有根据最近元素进行设置定位的位置，如果没有根据body元素进行定位。
绝对定位元素的父元素可以是用任何定位包括绝对定位，笔者建议是用相对定位，一般相对定位是配合着绝对定位使用的。

原文地址：https://www.cnblogs.com/lq0001/p/12115684.html

时间： 2024-08-15 03:39:13

深入学习CSS中如何使用定位的相关文章

【原】谈谈css中关于元素定位的属性（positon&z-index）

position position主要是4种设定: static(默认)如果不设置,默认就是staitc元素.其实就是没有position设定,DOM流安排在哪里就是哪里.所有的相关于位置的设定均无效,意味着left, right, z-index等属性设置了也是白设. relative如果只是设置postion: relative; 和static并没有视觉上的区别,但是,一旦设定了,就指定了对应DOM元素"被定位"了,之后就可以设置一些诸如right,left之类的属性. abso

CSS中的position定位

CSS定位有4中类型:通过position属性设置http://www.w3school.com.cn/cssref/pr_class_position.aspstatic:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)relative:生成相对定位的元素,相当于其正常位置进行定位.因此,"left:20" 会向元素的 LEFT 位置添加 20 像素.absolute:生成绝对定位的元素,相对于 static 定位以外的第

(转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是

css中三种定位详细介绍

在前台进行页面位置编辑时,时常碰到页面部分标签位置错乱,因此研究了一下通过css进行定位标签的方法. 定位方式:是指如何确定某个标签在页面中的位置. 1.固定定位:始终相对于浏览器窗口进行定位 1 <html> 2 <head> 3 <title>定位方式-固定定位</title> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 body

学习css中得与惑

css的学习分享所学的css知识看多,会看懂.这只是在实践中发现的问题: 一. ???h1比div还大 h1上下有边距为什么浮动不了 (现不知道) 二. css写了表现不出来.... 选择器问题 ?一直搞不懂选择器. 1 /*780=80 =113 33 a 31=20*/ 2 3 .warp{width: 780px;margin: 0 auto;border-left: 1px solid #e7e7e7;border-right: 1px solid #e7e7e

[转]深入理解css中的position定位和z-index属性

由于平时不太用到,所以过去写css的时候对于position属性的absolute. relative值理解比较模糊,对于z-index的层叠更是摸不着头脑,除了理解的因素外,各个浏览器的不同解析结果也是一个大问题.今天仔细阅读了一下css文档,总算是对盒模型的浮动.定位有了比较深刻的理解. 我们在实践中很有可能遇到这样的问题:1.做一个横向导航,然后鼠标经过之后出现下拉菜单,那么这个下拉菜单的位置控制就是一个关键:2.我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示,这时既不想让气泡提

CSS 中背景图片定位方法

三种: 关键字:background-position: top left; 像素:background-position: 0px 0px; 百分比:background-position: 0% 0%; 区别:前两种定位将背景图片左上角的原点放置在指定位置:第三种方式将图片本身的点(x%,y%)与背景区域的点(x%,y%)重合. 使用百分比设置的主要优势在于,当页面缩放的时候,背景图片也会跟着一起缩放.

css中position:fixed实现div居中

上下左右居中代码如下复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px;} 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中,那么把 left:0; 或者 right:0; 即可下面附一个DIV 元素在浏览器窗口居中其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞

CSS中的一些内容总结

一.选择器 1.选择器的分组:一个Style可以对多个选择器生效,只用在不同的选择器中间加入逗号即可.如: h1,h2,h3,h4,h5,h6 { color: green; } PS:CSS规定,所有子元素继承父元素的属性.但是对子元素的Style做修改后,就会覆盖父元素的属性. 2.派生选择器通过元素的上下文关系去选择元素,不同级别的元素使用空格隔开即可,表示选择空格前的元素中后代元素为空格后的内容的元素.如: li strong { font-style: italic; font-we