如何使用CSS控制页面元素的位置？

最新推荐文章于 2024-11-18 04:40:23 发布

weixin_34417183

最新推荐文章于 2024-11-18 04:40:23 发布

阅读量4.4k

点赞数 3

原文链接：https://juejin.im/post/5d01a969f265da1bc94ee7a4

版权

本文通过分析父子元素和同级元素的位置关系，探讨CSS中如何利用position和display属性来实现各种布局。包括绝对定位、相对定位、块级元素、行内元素和浮动效果的使用，旨在帮助读者理解并掌握基本的页面布局技巧。

摘要由CSDN通过智能技术生成

本篇不分析常见的布局方式，而是从同级元素之间的位置关系和父子元素之间的位置关系这两个方面来示例，理解了这两个点，就可以实现任何类型的布局了。

父子元素之间的位置关系

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button onclick="buttonHandler()">
      按钮
    </button>
  </body>
</html>
复制代码

又回到最开始的按钮例子，我们先忽略head标签及里面的内容。影响按钮展示的节点有 html -> body -> button

元素的定位类型是由position这个属性来决定的，它可能有五种类型：

static 默认值
absolute 绝对定位，元素会相对于 static 定位以外的第一个父元素进行定位
fixed 绝对定位，始终相对于浏览器窗口进行定位
relative 相对定位，相对于元素原本的位置来定位
inherit 继承父元素的定位类型

对按钮进行绝对定位

<html>
  <head>
    <title></title>
    <style>
      /* 如果希望按钮相对于body进行绝对定位，就需要讲body的定位类型设置为非static类型 */
      body {
        position: relative;
      }
      .button {
        position: absolute;
        left: 50px;
        top: 100px;
      }
    </style>
    <script>
      function buttonHandler() {
        alert(

最低0.47元/天解锁文章