Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS定位 position #6

Open
CruxF opened this issue Jul 25, 2018 · 0 comments
Open

CSS定位 position #6

CruxF opened this issue Jul 25, 2018 · 0 comments

Comments

@CruxF
Copy link
Owner

CruxF commented Jul 25, 2018 •
edited
Loading

前言

该篇博文是根据慕课网教程——《css定位position》整理而来，内容虽然简单基础，但是整理记录一下，帮助新手的同时也务实一下自己的基础知识。

HTML中三种布局方式

1、标准流：这是默认的布局方式。特点就是块级元素独占一行，意思就是两个块级或者多个块级元素不能在同一行显示，块级元素能设置宽高；内联元素能够在同一行显示，内联元素不能设置宽高。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div, p {
        height: 50px;
        line-height: 50px;
        background-color: green;
      }
      span, a {
        height: 50px;
        line-height: 50px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div>我是div</div>
    <p>我是p</p>
    <span>我是span</span>
    <a>我是a</a>
  </body>
</html>

2、position定位属性

  • static：默认值，没有定位特性，元素出现在正常的流中。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        height: 50px;
        width: 200px;
        line-height: 50px;
        background-color: green;
        position: static;
        left: 20px;
        top: 20px;
      }
    </style>
  </head>
  <body>
    <div>我是div</div>
  </body>
</html>
  • relative：相对定位，相对于自身正常的位置进行定位，不脱离文档流。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        height: 50px;
        width: 200px;
        line-height: 50px;
        background-color: green;
      }
      p {
        position: relative;
        top: 0;
        left: 15px;
        height: 50px;
        width: 500px;
        line-height: 50px;
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div>我是div</div>
    <p>我是相对定位的p元素，根据自身所在的位置进行定位</p>
  </body>
</html>
  • absolute：绝对定位，相对于static定位以外的第一个父元素进行定位
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        height: 500px;
        width: 800px;
        line-height: 500px;
        background-color: green;
        margin-left: 55px;
      }
      p {
        position: absolute;
        top: 0px;
        left: 55px;
        height: 50px;
        width: 500px;
        line-height: 50px;
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div>
    	<p>我是绝对定位的p元素，定位规则较复杂</p>
    </div>    
  </body>
</html>

当我们把父元素设置为相对定位或者绝对定位的时候，那么内部绝对定位的子元素就会根据父元素进行定位。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        height: 500px;
        width: 800px;
        line-height: 500px;
        background-color: green;
        margin-left: 55px;
        position: relative;
      }
      p {
        position: absolute;
        top: 0px;
        left: 55px;
        height: 50px;
        width: 500px;
        line-height: 50px;
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div>
      <p>我是绝对定位的p元素，定位规则较复杂</p>
    </div>
  </body>
</html>
  • inherit：从父元素中继承position的属性值
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        height: 500px;
        width: 800px;
        line-height: 500px;
        background-color: green;
        margin-left: 55px;
        position: relative;
      }
      p {
        position: inherit;
        top: 0px;
        left: 55px;
        height: 50px;
        width: 500px;
        line-height: 50px;
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div>
      <p>我是继承父元素相对定位的p元素</p>
    </div>
  </body>
</html>
  • fixed：固定定位，相对于浏览器窗口定位。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div {
        width: 100%;
        height: 3000px;
        border: 1px solid brown;
      }
      p {
        height: 50px;
        width: 500px;
        line-height: 50px;
        text-align: center;
        background-color: green;
        color: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div>
      <p>我是固定定位元素，相对于浏览器窗口进行定位</p>
    </div>
  </body>
</html>

z-index详解

  • 一般情况下，两个position属性值为relative或absolute或fixed的元素发生重叠，那么在文档流中后面的元素会覆盖掉前面的元素
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: red;
        position: fixed;
        left: 33px;
        top: 55px;
      }
      p {
        width: 200px;
        height: 200px;
        background-color: green;
        position: fixed;
        left: 155px;
        top: 200px;
      }
    </style>
  </head>
  <body>
    <div>我是div</div>
    <p>我是p</p>
  </body>
</html>
  • 我们能够使用z-index属性改变元素之间的堆叠顺序
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: red;
        position: fixed;
        left: 33px;
        top: 55px;
        z-index: 1;
      }
      p {
        width: 200px;
        height: 200px;
        background-color: green;
        position: fixed;
        left: 155px;
        top: 200px;
      }
    </style>
  </head>
  <body>
    <div>我是div</div>
    <p>我是p</p>
  </body>
</html>
  • 父元素遮盖子元素的实现只能在子元素上动手脚，修改父元素的z-index值不会有任何的效果
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div {
        width: 500px;
        height: 500px;
        background-color: red;
      }
      p {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
        z-index: -5;
      }
      h1 {
        width: 100px;
        height: 100px;
        background-color: black;
        position: absolute;
        top: 130px;
        left: 150px;
        z-index: -5;
      }
    </style>
  </head>
  <body>
    <div>
      <p>我是p</p>
      <h1></h1>
    </div>
  </body>
</html>
  • 子元素具有拼爹的特点，可以试一试修改的parent1和parent2的值
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      .parent1 {
        height: 500px;
        width: 500px;
        background-color: red;
        position: relative;
        z-index: 10;
      }
      .child1 {
        height: 300px;
        width: 300px;
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .parent2 {
        height: 400px;
        width: 400px;
        background-color: blueviolet;
        position: absolute;
        left: 50px;
        top: 50px;
        z-index: 5;
      }
      .child2 {
        height: 200px;
        width: 200px;
        background-color: teal;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="parent1">
      <div class="child1">child1</div>
    </div>
    <div class="parent2">
      <div class="child2">child2</div>
    </div>
  </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@CruxF