您的位置：鳄鱼CMS > CSS Position定位

CSS Position定位

2023-05-24 01:31 CSS教程

CSS Position定位

我们可以使用position属性设置元素的位置。

元素的位置也由顶部，底部，左侧和右侧属性控制。

但是，除非先设置position属性，否则这些属性将不起作用。

它们也根据不同的位置值工作。

允许的值为：

static - 布局正常。这是默认值。
relative - 相对于其正常位置定位。
absolute - 相对于其具有非静态位置值的其第一祖先定位。
fixed - 相对于浏览器窗口定位。

您可以使用top，bottom，left和right属性将元素从position属性指定的元素中移除。

以下代码演示了不同值的效果。

<!DOCTYPE HTML>
<html>
<head>
<style>
img {
  top: 5px;
  left: 150px;
  border: medium double black;
}
</style>
</head>
<body>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <img id="myID" src="http://www.www..cn/style/download.png"/>
  <p>This is a test.</p>
  <p>
    <button>Static</button>
    <button>Relative</button>
    <button>Absolute</button>
    <button>Fixed</button>
  </p>
  <script>
    var buttons = document.getElementsByTagName("BUTTON");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function(e) {
        document.getElementById("myID").style.position = e.target.innerHTML;
      };
    }
  </script>
</body>
</html>

上面的代码呈现如下：

静态定位

默认情况下，HTML元素位于静态。

静态定位元素根据页面的正常流动定位。

静态定位元素不受顶部，底部，左侧和右侧属性的影响。

静态定位元素根据页面的正常流动定位。

在下面的HTML代码中，第1个是固定定位的，其余的三个div元素是静态定位的。静态位置处于正常流动中，固定不在正常流动中。

<!DOCTYPE HTML>
<html>
<head>
  <style>
.myStyle {
  position: static;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  border: 1px solid #000;
  width: 200px;
  background-color:red;
}

.different {

  position: fixed;
  top: 0px;
  left: 80px;
  padding: 10px;
  margin: 5px;
  background-color:yellow;
  border: 1px solid #000;
  width: 20%;
}

  </style>
</head>
<body>
  <div class="different">1</div>
  <div class="myStyle">2</div>
  <div class="myStyle">3</div>
  <div class="myStyle">4</div>
</body>
</html>

上面的代码呈现如下：

固定定位

当您使用固定值时，元素将相对于浏览器窗口放置。元素占据相同的位置，即使内容的其余部分向上或向下滚动。

注意：仅当指定了！DOCTYPE 时，IE7和IE8才支持固定值。

固定元素从正常流中移除。固定定位的元素可以与其他元素重叠。

<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {
    position: fixed;
    top: 30px;
    right: 5px;
    color: red;
}
</style>
</head>
<body>
    <p>Some text</p>
    <p class="pos_fixed">Some positioned text.</p>
</body>
</html>

固定元件从正常流中移除。
文档和其他元素的行为就像固定定位元素不存在。
固定定位的元素可以与其他元素重叠。

例子

下面的代码将html body的高度设置为2000px，这使得滚动条可见。我们可以滚动滚动条来查看固定位置的div元素是否移动。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            html, body {
                height: 2000px;   
            }
            div {
                position: fixed;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: #ccc;
            }
            #div1 {
                top: 0;
                left: 0;   
            }
            #div2 {
                top: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
           div2
        </div>
    </body>
</html>

具有固定位置的元素始终相对于浏览器的视口定位，而不是在文档的结构中。

具有固定位置的元素保持在原位，即使文档被滚动。

例2

<!DOCTYPE HTML>
<html>
    <head>
        <style>
div {
    position: fixed;
    background: gold;
    border: 1px solid black;
    width: 100px;
    height: 100px;
}
div#fixed-top {
    top: 5px;
    left: 5px;
}
div#fixed-bottom {
    bottom: 5px;
    left: 5px;
}
  
   </style>
   </head>
   <body>
        <div id="fixed-top">
        </div>
        <div id="fixed-bottom">
        </div>


   </body>
</html>

例3

从下面的代码，我们可以看到，位置固定在正常流元素的顶部。

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css" rel="stylesheet">
        p {
          border-width: thin;
          border-style: solid; 
          height: 100px; 
          width: 100px;
          text-align: center
        }
        p.red {background-color: red; position: fixed; top: 0; left: 0}
        p.white {background-color: white; position: fixed; top: 0; left: 150px}
        p.blue {background-color: blue; position: fixed; top: 0; left: 300px}

    </style>
  </head>
  <body>
    <p class="red">
      Container 1
    </p>
    <p class="white">
      Container 2
    </p>
    <p class="blue">
      Container 3
    </p>
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
  </body>
</html>

相对定位

相对定位元件相对于其正常位置定位。

相对值应用顶部，底部，左侧和右侧属性来定位元素相对于静态值（默认布局）下的位置。

以下代码显示相对定位的结果。样式“left：-20px”从元素的原始左侧位置减去20个像素。样式“left：20px”为元素的原始左侧位置添加了20个像素。

<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {
    position: relative;
    left: -20px;
}

h2.pos_right {
    position: relative;
    left: 20px;
}
</style>
</head>
<body>

<h2>Heading with no position</h2>
<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>

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

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

例4

<!DOCTYPE html>
<html>
<head>
<style>
.left{
    position:relative;
    left:-20px;
}

.right{
    position:relative;
    left:20px;
}
</style>
</head>

<body>
    <h1>with no position</h1>
    <h2 class="left">moved left</h2>
    <h2 class="right">moved right</h2>
</body>
</html>

绝对定位

绝对定位将元素相对于具有非静态位置值的最近父亲定位。如果没有这样的元件，则元件相对于主体元素定位。
以下代码显示如何使用绝对定位。通过绝对定位，元素可以放置在页面的任何位置。以下标题距离网页左侧100像素，距离网页顶部150像素。

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
    position: absolute;
    left: 100px;
    top: 150px;
}
</style>
</head>
<body>

<h2>This heading has an absolute position</h2>

</body>
</html>

绝对定位的元素从正常流中移除。其他元素的行为就像没有绝对定位元素。
绝对定位的元素可以与其他元素重叠。

例5

<!DOCTYPE html>
<html>
<head>
<style>
h2{
    position:absolute;
    left:100px;
    top:150px;
}
</style>
</head>
<body>
   <h2>This is a heading with an absolute position</h2>
</body>
</html>

重叠

z-index 在重叠期间控制图层的顺序。

<html>
<head>
<style type="text/css">
p {
  width: 200px;
  background-color: #ffffff;
  padding: 5px;
  margin: 10px;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
}

p.one {
  z-index: 3;
  position: absolute;
  left: 0px;
  top: 0px;
}

p.two {
  z-index: 1;
  position: absolute;
  left: 150px;
  top: 25px;
}

p.three {
  z-index: 2;
  position: absolute;
  left: 40px;
  top: 35px;
}
</style>

</head>


<body>
  <div class="page">
    <p class="one">
      Here is paragraph <b>one</b>. This will be at the top of the page.
    </p>
    <p class="two">
      Here is paragraph <b>two</b>. This will be underneath the other
      elements.
    </p>
    <p class="three">
      Here is paragraph <b>three</b>. This will be at the bottom of the
      page.
    </p>
  </div>

</body>
</html>

阅读全文

以上是鳄鱼CMS为你收集整理的 CSS Position定位全部内容。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。

css媒体类型有哪些 CSS 媒体类型

2023-04-29 CSS教程

@media CSS规则关联一组嵌套语句。语法以下代码显示如何使用CSS @media规则。@media media-query { }media-query由媒体类型和/或...
css半透明属性介绍及代码实例 CSS半透明属性介绍及代码实例

2023-06-21 CSS教程

当我们在做网页的时候，有时为了整体页面搭配的美观，需要设置层样式为透明或者半透明，因为透明往往能产生不错的网页视觉效果。...
html中文名称叫什么 HTML <link>标签

2023-03-20 HTML参考手册

link 标签经常用于链接 CSS 样式表，在接下来的这个示例中，您将会了解 link 标签的使用格式：实例链接到外部样式文件:headlink ...
html中文名称叫什么 HTML <noscript> 标签

2023-05-05 HTML参考手册

noscript 标签在不支持 JavaScript 的浏览器中显示替代的内容，它可以包含任何 HTML 元素。实例noscript 标签的使用：scriptdoc...
html5+css3网页设计基础教程 HTML5 <article>标签

2023-04-19 HTML5教程

标签定义及使用说明article 标签定义独立的内容。article 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。arti...