CSS(四)

最新推荐文章于 2023-04-03 23:22:34 发布
最新推荐文章于 2023-04-03 23:22:34 发布
阅读量314 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40144821/article/details/108790011
版权

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位
        相对于自己原来的位置进行偏移
    -->

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px #666 solid;
        }
        #first{
            border: 1px #e6301a dashed;
            background-color: #56d4da;
            position: relative;/*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            border: 1px #69df5a dashed;
            background-color: #da3a9d;
        }
        #third{
            border: 1px #201eda dashed;
            background-color: #d5dad1;
            position: relative;/*相对定位：上下左右*/
            bottom -10px;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

相对定位：position: relative;
相对于原来的位置，进行指定的偏移
相对定位，任然在标准文档流中

top: -20px;
left: 20px;
bottom -10px;
right: 20px;

绝对定位

定位：基于xxx定位，上下左右
1.没有父级元素定位的前提下，相对于浏览器定位
2.假如父级元素存在定位，通常相对于父级元素定位
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移 绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

position:absolute;

固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            /*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            /*fixed,固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>

</body>
</html>

z-index

z-index：默认是零，最高无限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/a.PNG" alt=""></li>
        <li class="tipText">学习css</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点:China</li>
    </ul>
</div>


</body>
</html>

#content{
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 100px;
}
.tipText{
    color: white;
    /*z-index: 0;*/
}
.tipBg{
    background: #000;
    /*背景透明度*/
    /*或者：
    了解：filter: alpha(opacity=50);
    */
    opacity: 0.5;

}
不说话的娃娃鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
绝对定位right:0;无效_CSS定位属性Position实例分析
weixin_34763548的博客
01-28 917
CSS所提供的Position定位属性在进行网页页面布局过程中非常重要，通过使用Position定位属性可以实现对页面元素进行精确定位，最终达到较好的设计及页面展示效果。本文主要针对Position属性设计教学案例，实现教学。CSS学习教程Position定位属性Position定位属性为设计人员提供5类定位模式，分别为static静态定位、relative相对定位、absolute绝对定位、fi...
绝对定位right:0;无效_CSS定位详解
weixin_33364627的博客
01-24 1585
点击上方蓝字 关注我们CSS定位是基于盒子模型的，可分为静态static定位，绝对absolute定位，相对relative 定位，固定fixed定位。盒子模型：static：对象遵循正常文档流，top、right、bottom、left等属性无效。absolute：对象脱离正常文档流，使用left、right、top、bottom等属性进行定位，其层叠可通过css z-index属性...
绝对定位和相对定位的一些特性
weixin_30293079的博客
09-12 324
position：absolute/fixed优先级最高，有他们在时，float不起作用 postion与display:使用定位属性时，元素的display变成了inline-block，宽度从100%变成了auto postion与z-index:后者必须在定位属性下才会有效 position与overflow:当父元素使用了overflow且没有定位属性时，如果子元素是绝对定...
【无标题】绝对定位的特点
ZYX13721846745的博客
07-25 336
2289人阅读 绝对定位的特点： 1.建立了以包含块为基准的定位 2.完全脱离了标准文档流 3.随即拥有偏移属性和z-index属性 (absolute及fixed都属于绝对定位) absolute与fixed的相同点： ● 完全脱离了标准文档流—兄弟元素不再受其影响; ● 以父包含块为基准定位—初始位置在父包含块的左上角(没设置偏移量时). absolute与fixed的区别： absolute -- 无已定位祖先元素，以<html>为 偏移...
绝对定位的特点
XGump的博客
07-31 3070
绝对定位的特点
网页中css四种链接引用方法浅谈
12-10
<%–第一种方法–%> 　<link href="/site.css" rel="stylesheet" type="text/css" />...–第四种方法–%> 　<link href="<%=ResolveUrl("~/site.css")%>" rel="stylesheet
html引入css四种引入方式示例分享
09-25
本文将详细介绍四种常见的HTML引入CSS的方法，并通过一个示例代码来展示每一种方法的具体用法。 1. 标签内的CSS（内联样式） 内联样式是直接在HTML元素上应用样式。在HTML标签内部使用style属性来定义CSS样式。内联...
css四个按钮并列,4个常用的CSS3按钮悬停动效
weixin_39622332的博客
08-03 2589
CSS语言：CSSSCSS确定/** demo styles*/@media screen and (min-width: 769px) {html {font-size: 62.5%;}}@media screen and (min-width: 641px) and (max-width: 768px) {html {font-size: 56%;}}@media screen and (ma...
css 实现矩形四个边角加粗的方法
01-21
css 2、具体实现 效果图 html代码 <body> <h1 xss=removed>css实现矩形边角加粗 <span></span> <span></span> <span></span> <span></span> </body> css代码 body{ display: flex; ...
css相对定位与绝对定位的特征和用法
qq_46628314的博客
03-22 325
css相对定位与绝对定位@[TOC](css相对定位与绝对定位)欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowch...
CSS_定位
Twilight's Blog
01-31 547
position属性 absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed： 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 rel
绝对定位right:0;无效_女屌丝前端逆袭记（四）之定位
weixin_28487725的博客
01-24 564
相信看过我前面写过的三篇文档，对float、盒子模型、边距有了认识，那么我接下来介绍的这个可谓在布局中起到一个重要的作用，它就是"定位”。定位的作用：定位可以让元素摆放在你想要摆放的位置。先来看定位的模式：在css中，position属性用于定义元素的定位模式，其基本语法格式如下，属性值的说明如图1所示：选择器{position:static|relative|fixed|absolute|inh...
css之absolute绝对定位（绝对定位特性）
weixin_30794851的博客
10-13 322
学习了绝对定位以后，对此进行一个总结，啦啦啦啦~ 绝对定位特性 　　1、破坏性 破坏了原有的位置，从文档流里脱离出来 　　2、包裹性 如果下面这种情况，父级元素将不会有高度和宽度，失去原有的大小　　 　　 父级 <div> <div style="width: 100px;height: 100px;position: a...
CSS---绝对定位、相对定位、固定定位
maidu_xbd的博客
07-17 329
默认情况下，所有的网页标签都在标准流布局中，脱离标准流的方法有（1）float所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。（2）position属性 和 left、right、top、bottom属性 相对定位/绝对定位相同点：开启元素的相对定位/绝对定位后，如果不设置偏移量元素不会发生任何变化，会使元素提升一个层级 相对定位/绝对定位不同点： 分类 ...
绝对定位的特征以及需要注意的情况6条
weixin_34206899的博客
03-01 177
position:absolute; 绝对定位 a、使元素完全脱离文档流； b、使内嵌支持宽高； c、块属性标签内容撑开宽度； d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；《需要添加body的位置即：body{positive relative}》 e、相对定位一般都是配合绝对定位元素使用； f、提升层级《不会被后面覆盖，不保留原来的位置》 ...
CSS：绝对定位、相对定位、固定定位
Mr_zdk的博客
09-19 1154
绝对定位 position:    absolute 特性： 脱离文档流，定位元素占据的位置会释放 原点计算：如果该元素做了定位，那么就去找它做了定位的父元素（找最近的）作为原点基准，如果父元素都没做定位，则以浏览器(0,0)作为原点基准。 对内嵌元素定位后，设置宽高属性就会有效果 应用场景：     一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景 相对...
相对定位、绝对定位、固定定位
weixin_52629158的博客
04-03 1726
定位有三种，分别是相对定位、绝对定位、固定定位。
绝对定位与相对定位
kly_newera的博客
04-02 1429
1．定位的专业解释 (1)语法 position : static | absolute | fixed | relative (2) 说明 定位的方法有很多种，它们分别是静态（static），绝对定位（absolute），固定(fixed)，相对定位（relative）。其中，最常用也是最实用的两个定位方法：绝对定位（absolute）、相对定位（relative）。绝对定位（absolu
相对定位、绝对定位与固定定位
weixin_46704556的博客
05-05 3585
1. 定位 1.1 相对定位（relative) ​ 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的; 特点： ​ 它是相对于自己原来的位置来移动的（移动位置的时候是参照点是自己原来的位置）； ​ 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置） { position: relative; top: ; left: ; right: ; bottom: ; } 1.2 绝对定位（absolute)（子绝父相）
css 四角双弧度边框
最新发布
01-18
以下是两种实现CSS四角双弧度边框的方法： 1. 使用box-shadow和outline属性叠加效果： ```css .meaningful { width: 200px; background: #595959; border-radius: 0.8em; padding: 1em; box-shadow: 0 0 0 0.6...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值