webbasic之相对定位、绝对定位、固定定位

最新推荐文章于 2024-04-19 21:55:40 发布
最新推荐文章于 2024-04-19 21:55:40 发布
阅读量60 收藏
点赞数
原文链接：http://www.cnblogs.com/zch1126/p/5342868.html
版权

1.相对定位

-以自己为目标

-较小的偏移

-不脱离队伍（流）//位置不会释放

  position：relative

  left:值

  right:值

<!doctype html>
<html>
  <head>
     <meta charset="utf-8"/>
     <title>照片墙</title>
     <style>
        /*先刷墙*/
        body{
          background-color:#088;
        }
        /*再摆照片*/
        ul{
        width:780px;
        margin:20px auto;
        border:1px solid red;
        /*去掉符号*/
        list-style-type:none;
        }
        li{
          width:218px;
          padding:10px;
          margin:10px;
          border:1px solid #ccc;
          float:left; //左浮动保证图片正序排列
          background-color:#fff;
        }
        p{
         text-align:center;
        }
        /*使用相对定位实现照片抖动的效果*/
        li:hover{
          position:relative;
          left:2px;//以li左边界为基准，向右偏移2个像素
          top:-2px;//以li上边界为基准，向上偏移2个像素
        }
     </style>
  </head>
  <body>
     <ul>
       <li>
         <img src="../images/01.jpg"/>
         <p>轻轻地我走了</p>
       </li>
       <li>
         <img src="../images/02.jpg"/>
         <p>正如我轻轻地来</p>
       </li>
       <li>
         <img src="../images/03.jpg"/>
         <p>我轻轻地招手</p>
       </li>
       <li>
         <img src="../images/04.jpg"/>
         <p>作别西天的云彩</p>
       </li>
       <li>
         <img src="../images/05.jpg"/>
         <p>那河畔的青柳</p>
       </li>
       <li>
         <img src="../images/06.jpg"/>
         <p>是夕阳中的新娘</p>
       </li>
     </ul>
 
  </body>
</html>

2.绝对定位

-以父辈为目标

  带有position的父辈，如果没有position，则以body为目标，如果多个父辈带position

  以最近的父辈为目标

-较大的偏移

-脱离流（队伍）//位置会释放

position：absolute

left：值

top: 值

绝对定位实例：

<!doctype html>
<html>
  <head>
     <meta charset="utf-8"/>
     <title>新闻图片</title>
     <style>
         div{
           border:1px solid red;
           width:390px;
           height:258px;
           /*设置定位属性，为了子元素以该div为目标做绝对定位*/
           position:relative;
         }
         /*绝对定位*/
         p{
           position:absolute;
           top:0;
           left:0;
           margin:0;
           width:100%;
           text-align:center;
           line-height:30px;
           background-color:#ccc;
         }
     </style>
  </head>
  <body>
     <div>
        <img src="../images/2.jpg"/>
        <p>小李子终获小金人</p>
     </div>
  </body>
</html>

3.固定定位

-以窗口为目标

-巨大的偏移

-脱离流（队伍）

-永远挂在窗口上，无论如何滚动，都在那

position：fixed

left：值

right：值

<!doctype html>
<html>
  <head>
     <meta charset="utf-8"/>
     <title>demo</title>
     <style>
        div{
          width:50px;
          line-height:30px;
          text-align:center;
          background-color:#ccc;
          /*固定定位*/
          position:fixed;
          bottom:10px;//以窗口的底边为基准，向上偏移10个像素
          right:5px;//以窗口的右边为基准，向左偏移5个像素
        }
     </style>
  </head>
  <body>
     <div>
       <a href="#">TOP</a>//浏览器窗体顶部的锚点没有name
     </div> 
    <h1>iphone SE</h1>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p>它和5S一样大</p>
    <p></p>
 
  </body>
</html>

转载于:https://www.cnblogs.com/zch1126/p/5342868.html

weixin_30693683
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web——固定定位
疯纸的博客
09-26 1094
HTML固定定位
相对定位，绝对定位，固定定位
apple20154350217的博客
11-06 1062
四种定位方式（position） 共有属性：css四个属性（top、left、right、bottom）   1、Relative相对定位 a)   定位的元素，可以通过left、right、top、bottom这四个属性设置新的位置 b)  元素移动后，原来的坑不变。表面上看起来移动了，实际上没有移动(元神出窍) c)   作用：界面微调     配合绝对定位来用（子绝父相
WEB学习 -相对定位、绝对定位、固定定位、z-index
lyz0925的博客
10-31 1735
相对定位 相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。 2、不脱标，老家留坑，形影分离 也就是说相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。 3、相对定位用途 相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用： 1） 微调元素 2） 做绝对定位的参考，子绝父相（讲绝对定位的时候说...
Web学习记录---CSS（定位）
最新发布
m0_48860919的博客
04-19 712
定位模式是否脱标移动位置是否常用static 静态定位否不能使用边偏移很少relative 相对定位否 (占有位置)相对于自身位置移动常用absolute绝对定位是（不占有位置）带有定位的父级常用fixed 固定定位是（不占有位置）浏览器可视区常用sticky 粘性定位否 (占有位置)浏览器可视区当前阶段少是否占有位置（脱标否）以谁为基准点移动位置。学习定位重点学会子绝父相。通过盒子模型，清楚知道大部分html标签是一个盒子。
html绝对位置和相对位置例子,css-相对定位、绝对定位和固定定位例子
weixin_29367103的博客
06-09 532
相对定位相对定位.box1{height: 200px;background-color: red;position: relative;}.box2{width: 200px;height: 200px;background-color: yellow;/*定位：- 定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素- 通过position属性来设置元素的定位-可选值：sta...
web 定位
xuxu_77的博客
07-22 815
**注意：子元素设置绝对定位，父元素可以设置相对定位、绝对定位、固定定位， 这三种情况，参照元素都是父元素**
webbasic的使用
02-08
WebBasic是一种编程语言，主要设计用于网页开发，它结合了基本的编程概念和Web交互性。在Java领域，虽然WebBasic可能不是最常见的一种技术，但这个标题可能指的是使用Java来实现类似WebBasic的功能，即在Web环境中...
webbasic3的使用
02-09
WebBasic3是一个编程环境，主要用于教授和学习基本的编程概念，特别是针对Web应用程序。这个工具主要面向初学者，旨在简化Java编程的学习过程，通过提供一个友好的界面和基础的编程语句来帮助用户理解编程逻辑和数据...
webbasic
03-21
WebBasic 是一种基于 Web 的编程语言，它简化了网页交互和动态内容的创建。WebBasic 结合了传统 Basic 语言的简洁性和现代 Web 开发的需求，使得初学者和专业开发者都能快速上手。HTML（HyperText Markup Language）...
webBasic
03-06
<title> js1 </ title> [removed]函数myfunc（）{document.getElementById（'para'）。innerHTML ='paragraph Changed'; } </ script> <!-- for printing the page -->...
CSS层定位（相对定位，绝对定位，固定定位）
Mushan_vv的博客
05-15 2845
CSS 定位 (Positioning) 属性允许你对元素进行定位。 通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。 position 属性值的含义： static 没有定位，元素出现在正常的流中top, bottom, left, right ， z-index无效 relative 相对于其直接父元素进行定位top,bottom,left,ri...
Web前端之定位的简介
花&败
10-26 1515
按照我们之前所学知识，可以怎么实现呢？应该来说不难，很容易实现我们分别给box2和box3添加了外边距之后，就可以达到需求效果当然也可以使用浮动来解决上述问题，但稍微麻烦一点不管怎样，问题也是显而易见。我们实际开发中，页面上的元素可能很多，这样改必然是 牵一发而动全身那么仅仅靠我们之前学习的布局知识，不足以轻松应对这种场景那么就势必需要一个方便我们处理这种场景的办法，它就是定位。
z-index
qq_40301211的博客
03-19 231
控制“定位”元素的叠放层级 z-index只针对定位元素有效果 z-index值越大，层级越高 思考：上大盒子压住下大盒子 下大盒子里面的子元素压住上盒子 如果父元素已经比较过层级了（父元素“都有”z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的 ...
WEB开发基础篇 ---- CSS的基础（四）
weixin_45040301的博客
01-30 955
此篇文章为基础的CSS学习，暂未涉及CSS3的知识点，为本人学习时的笔记记录，同时也适合初学者学习。喜欢的友友可以关注一下，后续会补充JavaScript，TypeScript，vue2.0，vue3.0以及uni框架等等一系列的前端学习文章。（强者不喜请绕道，本人内心脆弱，勿喷） 继续上篇文章的内容，上次说到css的传统布局有三种： 第一种是标准流，在之前的学习中已经多次接触到标准流的知识了；其次是浮动，上一篇的文章中对浮动的知识已经有了较全面的讲解，并且列举了一个小米商城的布局作为案例；那最后一种布
【web前端开发】CSS定位
云泽野の编程日记
04-21 1581
定位有两个作用:1.可以解决盒子和盒子之间的层叠问题(定位之后元素层级最高,可以层叠在其它盒子上面)2.可以让盒子始终固定在屏幕中的某个位置属性名:position定位方式属性值静态定位static相对定位relative绝对定位absolute固定定位fixedps: 这四个取值中第一个就是不定位,加和不加都是一个效果.设置position只是设置定位的方式.除了定位方式还要设置偏移值偏移值设置分为两个方向(水平和垂直方向)方向属性名属性值含义水平left。
CSS 系列六 定位 、定位拓展（Z-index等）、 元素的显示与隐藏的三种方式
m0_55170432的博客
04-13 475
--------------------------- 六 定位 --------------------------- 1.1 为什么需要定位 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。 所以： 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 1.2 定位组成
【web前端】定位
qq_61768389的博客
07-05 1699
一、定位3、静态定位static（了解）4、相对定位relative（重要）5、绝对定位absolute（重要）6、子绝父相的由来7、固定定位fixed（重要）8、粘性定位sticky (了解)9、定位的总结10、定位叠放次序z-index，。。元素的显示与隐藏display,visibility,overflow等等等...
web前端入门到实战：css绝对定位和相对定位、固定定位
软件开发-前端开发-IT
09-23 3551
1、绝对定位 position：absolute； 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。 <!DOCTYPE html> <html lang="en"> <he...
相对定位(relative)，绝对定位(absolute)，固定定位(fixed)
热门推荐
weixin_44446758的博客
05-08 1万+
一、绝对定位 position：absolute 绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（html）。 绝对定位本身与文档流无关，因此不占空间，元素会脱离文档流，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，并且可以通过z-index属性来...
WebBasic入门：HTML、CSS与JavaScript解析
"WebBasic学习方法" 在Web开发领域，学习WebBasic是理解Web技术的基础。Web，即全球广域网，是由HTTP协议和超文本组成的分布式信息系统，它使得信息能够以交互的方式在全球范围内共享和传递。WebBasic主要涵盖HTML...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值