CSSposition属性

在CSSposition属性中,absolute和relative的结合使用是非常重要的东西。因为网页设计时用absolute和relative的相结合非常便利。

首先看relative,相对定位,在菜鸟教程上的解释是:相对定位元素的定位是相对其正常位置。而absolute,绝对定位,在菜鸟教程上的解释是:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。 基础部分就不说了,主要他两的结合使用,在网页设计时,你可以对第一个元素进行相对定位relative,而第二个用absolute绝对定位,作为一个子级,而relative作为一个父级存在。很明显的例子就是CSS轮播图的制作:

1<html> 2 <head> 3 <meta charset="utf-8" /> 4 5 <title>#</title> 6<style> 7#rela{ 8 9 height: 450px; 10 11 width: 800px; 12 13 margin: 0; 14 15 position: relative; 16 17 overflow: hidden; 18 19} 20 21 22 23.abos{ 24 width: 800px; 25 26 height: 2300px; 27 28 position: absolute; 29 30 top: 0; 31 32 left: 0; 33 34 35} 36 37</style> 38</head> 39<body> 40 <div id=resa"> 41 <div class="abso"> 42 <a href="#.html"> <img src=#" alt="#" width="800px" height="450px"/></a> 43 <a href="#.html"><img src="#" alt="#" width="800px" height="450px"/></a> 44 <a href="#.html"><img src="#" alt="#" width="800px" height="450px"/></a> 45 <a href="#.html"><img src="#" alt="#" width="800px" height="450px"/></a> 46 <a href="#.html" ><img src="#" alt="#" width="800px" height="450px"/></a> 47 48 49 </div> 50 </div> 51</body> 52</html>

以上的结果就是,abso元素会绝对定位在rela元素中,并且超出部分会被overflow隐藏,并且不会影响到abso。

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

你需要知道的CSS基础样式知识

原文链接:定位相关相对定位css.mycontentposition:relative;绝对定位css.mycontentposition:absolute;left:0;top:0;固定定位css.mycontentposition:fixed;left

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )

CSSposition属性 - HelloWorld