定位属性CSS

最新推荐文章于 2024-01-02 16:35:09 发布
最新推荐文章于 2024-01-02 16:35:09 发布
阅读量161 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OliverSongfly/article/details/81146765
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定位属性</title>
    <style type="text/css">
        /*
           position
          01.relative:相对定位，相对于自身原来的位置
          02.absolute：绝对定位，相当于父级
          03.fixed : 固定定位    相对于浏览器
          04.static ：默认值
        */
    img{
        position: fixed;  /*固定定位*/
        left: 50px;
        top: 20px;
    }
   #a{
       position: absolute; /*绝对定位*/
       top: 20px;
       height: 50px;
       width: 50px;
       background-color: blue;
   }
   #b{
       height: 50px;
       width: 50px;
       background-color: deeppink;
   }
   #c{
       position: relative; /*相对定位*/
       height: 50px;
       width: 50px;
       background-color: green;
   }
    </style>
</head>
<body>

    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
  <img src="image/cat.jpg"  width="50px" height="50px">
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style  type="text/css">
         div{
             margin: 10px;
             padding: 5px;
             font-size: 12px;
             line-height: 25px;
         }
/*
position属性：
  static：默认值，没有定位！
  relative:相对定位！ 相对于自身原来的位置！也就是现在的位置，按照定位能还原到原本的位置！
            设置相对定位的盒子，原本的位置会被留下来！
*/
        #father{
            border: 1px solid  red;
        }
        #first{
            border: 1px dashed  orange;
            background-color:orange ;
            position: relative;
            /*top: 20px;
            left: 20px;*/
        }
        #second{
            border: 1px dashed  pink;
            background-color:pink ;
            position: relative;
            float: right;
        }
        #third{
            border: 1px dashed  yellowgreen;
            background-color:yellowgreen ;
            position: relative;
        }
    </style>
</head>
<body>
  <div id="father">
       <div id="first">第1个盒子</div>
       <div id="second">第2个盒子</div>
       <div id="third">第3个盒子</div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>花样连接</title>
    <style type="text/css">
         div{
             width: 300px;
             height: 300px;
             border: 1px solid red;
             padding: 10px;
         }
        a{
            display: block;
            height: 80px;
            width: 80px;
            background-color:pink ;
            text-decoration: none;
            text-align: center;
            line-height: 80px;
        }
        #a2,#a4{
            position: relative;
            left:180px;
            top: -80px;
        }
        #a5{
            position: relative;
            left:90px ;
            top: -240px;
        }
        a:hover{
            background: blue;
            text-decoration: underline;
            color: deeppink;
        }

    </style>
</head>
<body>
<div id="box">
    <a href="#" id="a1">链接1</a>
    <a href="#" id="a2">链接2</a>
    <a href="#" id="a3">链接3</a>
    <a href="#" id="a4">链接4</a>
    <a href="#" id="a5">链接5</a>
</div>
</body>
</html>
/*
position属性：
  static：默认值，没有定位！
  relative:相对定位！ 相对于自身原来的位置！也就是现在的位置，按照定位能还原到原本的位置！
            设置相对定位的盒子，原本的位置会被留下来！
  absolute:绝对定位：相对于离当前元素最近的一个已经定位的父级元素为基准！
            如果父级元素没有设置定位属性，则以浏览器为准！
            元素的位置发生变化之后，脱离了标准的文档流！它原来的位置不会保留！
  fixed: 固定定位！ 相对于浏览器的！
  z-index: 设置层叠！ 数值越大，离我们越近！  对于没有设置position属性的元素无效！
*/

 

Oliver叫喳喳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS教程 CSS定位属性
09-25
CSS定位属性是网页布局设计的关键，它允许开发者精确控制元素在页面上的位置，从而实现复杂的网页布局。在CSS中，有三种主要的定位机制：普通流、浮动和绝对定位。 普通流是元素默认的布局方式，块级元素从上到下...
简明CSS定位属性position
09-25
POSITION属性用来决定元素在页面上的位置，其定位属性有多个，下面一一为大家介绍下，希望大家在使用过程中可以用到
CSS属性之定位
qq_41583484的博客
02-23 941
CSS属性之定位 定位（position）作为CSS中使用频率较高的几大类属性之一，在页面布局，排版，页面功能化方面起着不可或缺的作用，其作为CSS基础中的一个较难点，成为了很多前端入门者学习的困扰，接下来我们来聊聊CSS中定位的那些事。 顾名思义，浮动强调悬浮，定位强调位置，定位的关键点在于其位置以及参照物的选取。 定位有以下几种常用属性：relative（相对），absolute（绝对），fi...
CSS的定位属性
qq_45799465的博客
01-23 3764
使用场景：想要覆盖盒子或移动盒子位置的时候使用。 绝对定位（position：absolute） 文档流 一个盒子给了绝对定位以后，该盒子是悬空不占位置的，并且不会进行移动。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ..
css定位属性
weixin_48180273的博客
01-28 4844
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 一、position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。 static relative fixed absolute 1.相对定位：relative 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调），它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。而且不脱出文档流，还占据着位置。 d
css属性之定位
qq_40860137的博客
11-18 4981
4.1 定位 4.1.1绝对定位 格式:position:absolute feature: 1. 脱离原来位置进行定位(当一个元素成为absolute定位,他会脱离原来的层面,跑到上一个层面去,他原来位置真空了,在他下面的元素就会跑上去)               2.现对于最近的有定位属性的父级进行定位,,如果父级没有定位,那就相对于文档进行定位  example: html代码...
css定位属性详解（position属性）
qq_37899792的博客
05-21 4296
一、定位属性 1、定位属性 属性：position 取值： 1、static 默认值，默认定位方式 2、relative 相对定位 3、absolute ...
css定位属性position:fixed
wangooo的博客
01-02 2706
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
CSS定位属性详解
m0_68997646的博客
01-25 1183
CSS定位属性详解
css postition 定位属性
weixin_42684143的博客
04-09 1862
包括 static absolute relative fixed static ： 默认值，忽略 top bottom left right 等声明 absolute : 相对于腹肌元素绝对定位，浮出、脱离文档流，若父级没有定位，则以html直接 left top right bottom 层级 z-index：value relative ： 相对于默认位置的偏移定位，通过设置left to...
css的定位属性——固定定位和粘性定位
weixin_46579411的博客
03-30 3538
一、固定定位 position:fixed; 【固定定位】 a: 参照物：浏览器窗口。 b: 不占据空间，脱离布局流。 （注：如果块状元素没有设置宽度的时候，添加position:absolute 或position:fixed会出现宽度被内容撑开） 让一个元素在浏览器窗口左右上下居中？ 第一种方法： position:fixed; left:50%;top:50%; margin-left:-...
css背景属性
ssjjrr的博客
09-30 3327
css背景属性
CSS属性
01-20
CSS属性 一、 CSS定位区别 static:默认值，设置坐标无效 absolute：绝对定位（参考浏览器，html)； 特征： 1. 脱离文档流，不占位置 2. 默认参考浏览器零点 3. margin+left/top relative：相对定位 特征： 1. 占据...
CSS属性之定位属性（图文详解）
12-13
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 下面逐一介绍...
简单Pysimplegui窗口的迷宫python课设
07-09
简单 PySimpleGUI 窗口的迷宫 Python 课设 概述 本课程设计旨在通过使用 PySimpleGUI 库开发一个简单的迷宫游戏，让学生熟悉 GUI 编程的基础知识，掌握迷宫生成算法，提升 Python 编程能力。PySimpleGUI 是一个易于使用的图形用户界面库，适合快速开发窗口应用。 课程目标 熟悉 PySimpleGUI 的基本使用方法：了解如何创建窗口、布局控件以及处理事件。 掌握迷宫生成算法：学习并实现常见的迷宫生成算法，如深度优先搜索 (DFS) 或递归分割法。 实现迷宫导航功能：设计并实现玩家在迷宫中导航的功能，包括处理键盘输入、绘制路径等。 提升编程能力：通过实际项目练习，增强学生的编程逻辑思维和问题解决能力。 课程设计步骤 1. 环境配置 首先，学生需要确保安装了必要的 Python 库，如 PySimpleGUI。安装过程非常简单，可以通过命令行工具安装。 2. 创建基本窗口 学生将学习如何使用 PySimpleGUI 创建一个基本的窗口界面。该窗口包含用于显示迷宫的画布和一些控制按钮。通过设计这个基本界面，学生可以理解 GUI 应用的基本结构
数字图像处理第三章二值图像.pptx
最新发布
07-10
数字图像处理第三章二值图像.pptx
洛谷 1059 明明的随机数 （附源码）
07-09
C++洛谷上的一道题，内有AC源代码，不懂可以问，难度：普及-
hs.mobileconfig
07-10
hs.mobileconfig
【Matlab仿真】 - matlab installation guide
07-10
Matlab是一种功能强大的数学计算和仿真软件，广泛应用于科学、工程和技术领域。它提供了丰富的工具和函数，用于数值计算、数据分析、图形绘制和模型仿真等任务。 Matlab的仿真功能使得用户能够建立和模拟各种复杂系统和现象。通过编写脚本或使用交互式工具，用户可以构建数学模型并对其进行仿真。这些模型可以涉及物理、电子、控制系统、通信、信号处理等领域。 Matlab提供了广泛的工具箱和库，用于处理不同类型的仿真任务。例如，Simulink工具箱提供了建模和仿真动态系统的功能，用户可以通过拖放和连接图形组件来构建系统模型。另外，Matlab还提供了用于优化、最小二乘拟合、概率分布分析等任务的工具箱。 Matlab的仿真功能还可以与其他领域的工具和技术进行集成。它可以与CAD软件、电路设计工具、机器学习库等进行互操作，从而实现复杂系统的多领域仿真。 通过Matlab的仿真功能，用户可以进行系统设计和验证，优化算法和参数，分析系统性能，并从仿真结果中获得有关系统行为的洞察。这有助于提高工程师和科学家在设计和开发过程中的效率和准确性。
css的定位和浮动属性
12-04
CSS的定位和浮动属性可以用来控制HTML元素的位置和布局。下面是它们的详细介绍： 1. 定位属性 定位属性包括：static、relative、absolute、fixed和sticky。其中，static是默认值，表示元素出现在正常的流中，不受top、bottom、left和right属性的影响；relative表示相对于元素本身的位置进行定位；absolute表示相对于最近的已定位祖先元素进行定位；fixed表示相对于浏览器窗口进行定位；sticky表示根据用户的滚动位置进行定位。 2. 浮动属性 浮动属性包括：left、right和none。浮动元素会脱离文档流，向左或向右移动，直到它的外边缘碰到包含它的元素或者另一个浮动元素的边缘为止。如果没有足够的空间，浮动元素会向下移动，直到它可以放置在页面上。 下面是一个例子，演示如何使用定位和浮动属性来布局HTML元素： ```html <!DOCTYPE html> <html> <head> <title>定位和浮动属性的例子</title> <style> .container { border: 1px solid black; padding: 10px; overflow: auto; } .box { width: 100px; height: 100px; margin: 10px; background-color: red; float: left; } .relative { position: relative; left: 50px; top: 50px; } .absolute { position: absolute; right: 50px; top: 50px; } .fixed { position: fixed; right: 50px; bottom: 50px; } .sticky { position: sticky; top: 0; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box relative"></div> <div class="box absolute"></div> <div class="box fixed"></div> <div class="box sticky"></div> </div> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值