CSS定位

最新推荐文章于 2022-10-03 19:55:37 发布
最新推荐文章于 2022-10-03 19:55:37 发布
阅读量136 收藏
点赞数 2
分类专栏： web 文章标签： html css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56787796/article/details/115641539
版权

CSS定位

相对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相对定位</title>
    <style>
      .div1 {
        /* 相对定位 */
        position: relative;
        top: 50px;
        left: 50px;
        /* 它是相对于自己原来的位置来移动的
        (移动位置的时候参照点是自己原来的位置) */
        /* 原来在标准流的位置继续占有，
        后面的盒子仍然以标准流的方式对待它。
        (不脱标，继续保留原来位置) */
        /* 因此,相对定位并没有脱标。
        它最典型的应用是给绝对定位当爹的。。 */
        background-color: red;
        width: 200px;
        height: 200px;
      }
      .div2 {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div2"></div>
  </body>
</html>

相对定位

绝对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对定位</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .div1 {
        position: relative;
        /* “子绝父相” */
        /*子级是绝对定位的话，父级要用相对定位。 */
        /* 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，
         不会影响其他的兄弟盒子。 */
        /* 父盒子布局时，需要占有位置,因此父亲只能是相对定位 */
        width: 400px;
        height: 400px;
        background-color: aqua;
      }
      .div2 {
        width: 300px;
        height: 300px;
        background-color: blue;
      }
      .div3 {
        /* 绝对定位 */
        position: absolute;
        bottom: 10px;
        left: 10px;
        /* 如果没有祖先元素或者祖先元素没有定位，
        则以浏览器为准定位。 */
        /* 如果祖先元素有定位（相对、绝对、固定定位），
        则以最近一级的有定位祖先元素为参考点移动位置。 */
        /* 绝对定位布展由原来的位置(脱标) */
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <div class="div2">
        <div class="div3"></div>
      </div>
    </div>
  </body>
</html>

绝对定位

固定定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>固定定位</title>
    <style>
      .div1 {
        margin: 0 auto;
        width: 800px;
        height: 1500px;
        background-color: pink;
      }
      .a {
        position: fixed;
        /* top: 40px;
        right: 20px; */
        /* 以浏览器的可视窗口为参照点移动元素。 
           跟父元素没有任何关系
           不随滚动条滚动。*/
        /* 固定定位不在占有原先的位置。 */
        /* 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。 */
        left: 50%;
        margin-left: 410px;
        /* 固定定位小技巧:固定在版心右侧位置。 */
        top: 500px;
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="a"></div>
    <div class="div1"></div>
  </body>
</html>

上下滑动页面蓝框永远在页面的那个位置
固定定位

粘性定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>粘性定位</title>
    <style>
      body {
        height: 3000px;
      }
      .div1 {
        position: sticky;
        /* 以浏览器的可视窗口为参照点移动元素(固定定位特点) */
        /* 粘性定位占有原先的位置(相对定位特点) */
        /* 必须添加top. left、right、bottom其中一个才有效 */
        top: 0px;
        margin: 100px auto;
        width: 500px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
  </body>
</html>

1
2
3

绝对定位水平垂直居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对定位水平垂直居中</title>
    <style>
      /* 加了绝对定位的盒子不能通过margin:0auto 水平居中，
        但是可以通过以下计算方法实现水平和垂直居中 */
      .box {
        position: absolute;
        /* 水平居中 */
        left: 50%;
        margin-left: -100px;
        /* 垂直居中 */
        top: 50%;
        margin-top: -100px;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      /* 绝对定位和固定定位也和浮动类似。 */
      /* 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。 */
      /* 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
      
      /* 脱标的盒子不会触发外边距塌陷 */
      /* 浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。 */
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

1
2

定位层叠

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位层叠</title>
    <style>
      .w {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
      }
      .div1 {
        background-color: red;
        z-index: 1;
        /* 数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上 */
        /* 如果属性值相同，则按照书写顺序，后来居上 */
        /* 数字后面不能加单位 */
        /* 只有定位的盒子才有z-index属性 */
      }
      .div2 {
        background-color: blue;
      }
      .div3 {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="div1 w"></div>
    <div class="div2 w"></div>
    <div class="div3 w"></div>
  </body>
</html>

div1加z-index: 1;
1
div1不加z-index: 1;
2

定位的扩展

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位的扩展</title>
    <style>
      .div1 {
        /* float: left; */
        /* 浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片) */
        /* 浮动最初是用来做文字环绕效果的 */
        position: absolute;
        /* 绝对定位(固定定位)会压住下面标准流所有的内容。 */
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <p>111111112222222223333333334444444455555556666666</p>
  </body>
</html>

绝对定位时
1
浮动时
2
好东西留在最后

总结
ps:图片来自黑马程序员

溯琳
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
css定位页面元素,页面元素定位-CSS元素基本定位
weixin_32147807的博客
08-04 2234
基本定位"""属性定位 一 """# #通过id# driver.find_element_by_css_selector("#kw").send_keys(u"博客园")# #通过class# driver.find_element_by_css_selector(".s_ipt").send_keys(u"博客园")#通过标签 数量过多的情况下需要增加标签过滤# driver.find_ele...
css定位和xpath定位,selenium的css定位与xpath定位
weixin_36163071的博客
08-04 1090
大部分人在使用selenium定位元素时，用的是xpath定位，因为xpath基本能解决定位的需求。css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁。一：css:属性定位1、css可以通过元素的id、class、标签这三个常规属性直接定位，如下：①. css用#号表示id属性，如：id=“kw” 可以写成：#kw②. css用.表示class属性，如：class="...
css定位属性
weixin_48180273的博客
01-28 4781
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 一、position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。 static relative fixed absolute 1.相对定位：relative 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调），它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。而且不脱出文档流，还占据着位置。 d
CSS定位与浮动
m0_49034593的博客
08-18 2119
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务
selenium之css定位详解
王大傻的博客
02-22 8045
css定位 css概述： 1、css（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式。 2、css语言中有css选择器，在selenium中也可以使用这种选择器来进行元素定位。 3、css定位方式比xpath快，而且css的语法也非常强大，所以非常推荐这种方式定位。 css定位策略（方式）： 1、id选择器 2、class选择器 3、元素选择器 4、属性选择器 5、层级选择器 css定位方法：find_element_by_css_selector() 1
CSS定位详解
老电影故事的博客
11-25 4638
一、CSS position CSS position属性用于指定一个元素在文档中的定位方式，定位分为静态定位，相对定位，绝对定位，固定定位、粘性定位这五种其中top、right、bottom、left和z-index属性则决定了该元素的最终位置。 二、静态定位（static） 一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。 1、对边偏移无效。 2、一般用来清除定位的 3、一个有定位的盒子不想再有定位了，加上 position:static;就可以了 三、相对定位（relati
CSS定位和浮动
m0_50555031的博客
05-20 1217
介绍CSS定位和浮动
CSS定位布局详解
大河之犬的博客
10-03 5765
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。
css定位&锚点
ZJH_are的博客
07-13 3074
1.定位的作用:控制元素在浏览器中的位置 2.生活中的案例 - 把大象放进冰箱需要几步:打开、放进去、关闭 - 把志强吊在投影仪上听课:绑起来、吊上去、嘲笑他 3.定位需要的条件 - 大象:需要移动位置的对象 - 冰箱:参照物 - 方向:前端方向 4.定位的属性:position 定位、位置 5.定位的属性值 - static 默认值 静态定位 - relative
CSS定位.pdf
04-12
css有几种定位方式,分别是如何实现定位的
前端css定位.pdf
07-28
本人整理的css定位
CSS定位的教程
09-24
主要介绍了CSS定位的教程,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解css 定位与定位应用
12-01
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
CSS背景
溯琳的博客
04-10 2046
CSS背景背景颜色背景图片位置背景色半透明 背景颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-sc
个人简历
溯琳的博客
04-05 2024
个人简历 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>个人简历</title> <style type="text/css"> *{ margin: 50px auto; padding: 0; } .a,.b,.c,.d,.e{ background-color:skyblue; }
HTML5视频
溯琳的博客
04-17 744
HTML5视频 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
HTML5音频
溯琳的博客
04-18 644
HTML5音频 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
selenium的css定位
最新发布
10-19
Selenium 的 CSS 定位可以通过 `driver.find_element_by_css_selector()` 方法实现。具体语法如下： ```python element = driver.find_element_by_css_selector("css_selector") ``` 其中，`css_selector` 是 CSS ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值