css位置-CSS 基础知识 - 定位

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

CSS中一般使用position属性来确定元素的定位方式。

常用的定位方法一般有

价值

意义

相对的

相对定位

绝对

绝对定位

固定的

固定定位

相对定位

位置设置为相对。

相对定位是指元素通过使用top、left等属性相对于其原始位置进行连接css位置，以在新的位置显示它们。

相对定位的元素实际上是连接的，之前的位置并没有被丢弃，连接后也不会占用原来元素的位置（但是原来位置的元素会被封顶）。

相对定位一般用于微调元素的位置； 相对定位可以作为下面要讨论的绝对定位的参考坐标。

属性

价值

影响

顶部

像素、百分比等

相对于原来的位置，与上面联通的距离可以为负值

左边

像素、百分比等

相对于原始位置，距联通右侧的距离，可以为负值

正确的

像素、百分比等

相对于原始位置，距右链接的距离可以为负值

底部

像素、百分比等

相对于原始位置，距底部链接的距离可以为负。

相对定位示例

像素描述位置

box2 已打开相对定位并在新位置渲染。

                            * {        margin: 0;        padding: 0;      }
      p {        width: 100px;        height: 100px;        background-color: orange;        border: 1px solid #000;      }
      .box2 {        position: relative;        top: 102px;        left: 102px;      }    
    

  

比率法

如果相对定位中，上、左、下、右写为比例，则表示它们在父容器中显示的比例位置。

例子

父元素的宽和高均为 200px。 如果启用子元素的相对定位，则子元素位置如下。

                            * {        margin: 0;        padding: 0;      }      div {        width: 200px;        height: 200px;        border: 1px solid #000;        margin: 40px auto;      }
      p {        position: relative;        top: 50%;        left: 50%;        width: 100px;        height: 100px;        background-color: orange;      }        

    
  

绝对定位

位置设置为绝对。

绝对定位的元素在浏览器中具有绝对位置，可以通过坐标来描述。

绝对定位的元素脱离了标准文档流，释放了它们原来的位置； 与此同时，他们在新职位上涵盖了其他要素。

绝对定位的元素将在其祖先元素中寻找具有定位属性的元素作为参考点。 该祖先元素通常是相对定位的。

如果绝对定位的元素找不到具有定位属性的祖先元素作为参考点，它将相对于 IBC（初始包含块，可以认为是 HTML 根元素）进行定位。

属性

价值

影响

顶部

像素、百分比等

相对于参考点的位置，参考点上方距联通的距离可以为负值

左边

像素、百分比等

相对于参考点的位置，参考点右侧到联通的距离，可以为负值

正确的

像素、百分比等

相对于参考点的位置，参考点右侧到联通的距离，可以为负值

底部

像素、百分比等

相对于参考点的位置css位置，距参考点的距离可以是负值。

例子

参考点IBC

参考点是IBC。 此时top、left、bottom、right都是通过HTML和节点来描述元素的位置。

                            * {        margin: 0;        padding: 0;      }      div {        width: 200px;        height: 200px;      }      .box1 {        background-color: orange;      }      .box2 {        background-color: green;        position: absolute;        top: 230px;        left: 200px;      }      .box3 {        background-color: blue;      }        
    
    
    
      
alalaladdddddddddddddddddddddddddddddddddd      
alalaladdddddddddddddddddddddddddddddddddd      
alalaladdddddddddddddddddddddddddddddddddd      
alalaladdddddddddddddddddddddddddddddddddd      
alalaladdddddddddddddddddddddddddddddddddd      
alalaladdddddddddddddddddddddddddddddddddd      
alalaladdddddddddddddddddddddddddddddddddd    
  

参考点用于定位元素

最经典的是父节点启用相对定位，子元素启用绝对定位； 此时top、left、bottom、right都是通过父元素的位置来描述子元素的。

                            * {        margin: 0;        padding: 0;      }      .box1 {        width: 402px;        height: 402x;        border: 1px solid #000;        padding: 100px;        margin: 0 auto;        position: relative;      }
      .box2 {        width: 200px;        height: 200px;        padding: 50px;        border: 1px solid #000;        position: relative;      }
      .box3 {        width: 50px;        height: 50px;        border: 1px solid #000;        position: absolute;        top: 0px;        left: 0px;        background-color: orange;      }        
      
        
dual      
    
  

固定定位

位置设置为固定。

无论页面如何下拉，元素始终会固定在一个位置。

固定定位仅使用页面作为参考点，但也脱离了标准文档流。

固定定位用途：

用于长页面内容、返回底部功能等。

用于制作CSS精灵（现在很少使用）

                            .box {            position: fixed;            top: 100px;            left: 100px;            width: 100px;            height: 100px;            background-color: red;        }
        body {            height: 100000px;        }    

级联属性

对于上面提到的定位元素，它们可能会覆盖渲染位置处的原始元素。 我们不希望这种情况在个别情况下发生。

此时就用到了 z-index 属性。 它的值是一个正整数，值越大，里面显示的越多。

                            .box1 {            width: 300px;            height: 300px;            background-color: orange;            position: absolute;            top:100px;            left: 100px;            z-index: 2;        }
        .box2 {            width: 300px;            height: 300px;            background-color: green;            position: absolute;            z-index: 10;        }
    
    

总结

相对定位：相对于其原始位置进行定位。

绝对定位：选择一个参考点进行定位。 参考点可以是具有定位属性的祖先元素，如果未找到，则可以是 IBC。

固定定位：在页面上的固定位置（可视化屏幕），不随着页面滚动而滚动。

大家好，我是一名IT分享者，简称皮皮。 在这篇文章中我们将讨论 CSS 定位。 一、Position（定位）

CSS 定位属性允许您定位元素。 它还可以将一个元素放在另一个元素的前面，并指定如果元素的内容太大应该发生什么。

可以使用bottom、bottom、left 和side 属性来定位元素。 但是，除非首先设置位置属性，否则这些属性不起作用。 根据它们的定位方式css位置，它们的工作方式也有所不同。

2.属性1.静态定位（默认疗效）

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

静态定位的元素不受上、下、左、右的影响。

2、固定定位

元素的位置是相对于浏览器窗口的固定位置。

即使窗口滚动它也不会通信：

<html>        <meta charset="utf-8">        <meta name="viewport" content="width=640, user-scalable=no">    <head>        <style>            p.pos_fixed {                position: fixed;                top: 30px;                right: 5px;            }</style>    </head>
    <body>
        <p class="pos_fixed">Some more text</p>        <p><b>Note:</b> 代码使人进步！！！.</p>        <p>Some text</p>        <p>Some text</p>        <p>Some text</p>        <p>Some text</p>
    </body>
</html>

注意：

固定定位使元素的位置独立于文档流，因此不会占用空间。

固定定位的元素与其他元素重叠。

3、相对定位

相对定位的元素是相对于其正常位置定位的。

<html>    <meta charset="utf-8">    <meta name="viewport" content="width=640, user-scalable=no">    <title> 定位</title>
    <head>        <style>            h2.pos_left {                position: relative;                left: -20px;            }
            h2.pos_right {                position: relative;                left: 20px;            }</style>    </head>
    <body style="background-color:azure;">
        <p>Some more text</p>        <p><b>Note:</b> 代码使人进步！！！.</p>        <h2 class="pos_left">This heading is moved left according to its normal position</h2>        <h2 class="pos_right">This heading is moved right according to its normal position</h2>
    </body>
</html>

相对定位的可连接元素和相互重叠的元素的内容不会改变它们原来占据的空间。

h2.pos_top{    position:relative;    top:-50px;}

相对定位的元素通常用作绝对定位元素的容器块。

4. 绝对定位

绝对定位元素的位置是相对于最近定位的父元素的css位置，或者如果该元素没有定位的父元素，则其位置是相对于：

h2{    position:absolute;    left:100px;    top:150px;}

绝对定位使得元素的位置独立于文档流，因此不占用空间。

绝对定位的元素与其他元素重叠。

3. 重叠元素

元素的定位独立于文档流，因此它们可以覆盖页面上的其他元素

z-index 属性指定元素的堆叠顺序（哪个元素应放置在后面或旁边）

元素可以具有负或正的堆叠顺序：

img{    position:absolute;    left:0px;    top:0px;    z-index:-1;}

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素后面。

注意：如果两个定位元素重叠并且未指定 z-index，则 HTML 代码中最后定位的元素将首先显示。

四。 概括

本文基于Html的基础，主要介绍CSS中的四种定位方法。 对于四种定位表达，用丰富的案例和代码效果图的展示来帮助你更好的理解。

最后希望能够帮助大家更好的学习CSS3。