文档章节

CSS定位

s
 studywin
发布于 10/20 01:22
字数 913
阅读 23
收藏 0

CSS定位

  • relative相对定位
  • absolute绝对定位
  • fixed和sticky及zIndex
  • 定位实现下拉菜单
  • 定位实现元素居中
  • 定位实现列表装饰点

 

relative相对定位

position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。

position取值:static( 默认) | relative | absolute | fixed | sticky

relative相对定位

如果没有定位偏移量,对元素本身没有任何影响,不使元素脱离文档流,不影响其他元素布局,left、top、right、bottom 是相对于当前元素本身身进行偏移的。

html代码

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

css代码    

<style>
        div{width: 100px;height: 100px;}
        #box1{background: #F00;}
        #box2{background:blue;position: relative;left:100px;top:100px;}
        #box3{background: yellow;}
</style>

 浏览器显示:

   

 

absolute绝对定位

使元素完全脱离文档流,内联元素支持宽高(让内联具备块特性),块元素默认宽根据内容决定(让块具备内联的特性);如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)。

 

fixed和sticky及zIndex

fixed固定定位

使元素完全脱离文档流

使内联元素支持宽高(让内联具备块特性)

使块元素默认宽根据内容决定(让块具备内联的特性)

相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响

 

sticky黏性定位

在指定的位置,进行黏性操作( 在拖动滚动条时 )。

 

z-index定位层级

默认层级为0

嵌套时候的层级问题

 

定位实现下拉菜单 

html代码

<div id="menu">
        <span>千牛卖家中心</span>
        <ul>
            <li>免费开店</li>
            <li>已卖出的宝贝</li>
            <li>出售中的宝贝</li>
            <li>卖家服务市场</li>
            <li>卖家培训中心</li>
            <li>体检中心</li>
            <li>问商友</li>
        </ul>
</div>

css代码

 *{margin: 0;padding: 0;}
        ul{list-style:none;}
        #menu{width: 102px;height: 46px;border:1px solid #000;font-size:12px;margin:100px auto;position: relative;color:#6c6c6c;}
        #menu span{padding-left: 6px;padding-top: 13px;display:block;cursor:pointer;}
        #menu ul{line-height: 28px;width:102px;border:1px solid #000;position: absolute;left:-1px;top:46px;display:none;}
        #menu ul li{padding-left: 6px;cursor: pointer;}
        #menu:hover span{color:rgb(255,68,0);}
        #menu:hover ul{display:block;}
        #menu ul li:hover{background: #f5f5f5;}

 

定位实现元素居中

html 代码

<div id="box1">
    <div id="box2"></div>
</div>

CSS 代码

#box1{width: 300px;height: 300px;border:1px solid black;position: relative;}
#box2{width: 100px;height: 100px;background: #f00;position: absolute;left:50%;top:50%;margin:-50px 0 0 -50px;}

效果图

 

定位实现列表装饰点

代码

<!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">
    <title>Document</title>
    <style>
        ul{list-style:none;}
        li{position:relative;/* border:1px solid black; */padding-left: 20px;}
        li:before{content: '';display: block;width: 7px;height: 7px;background: mediumvioletred;position: absolute;left: 6px;top: 27%;}
    </style>
</head>
<body>
    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
</body>
</html>

 

CSS Sprite

CSS 雪碧也叫做 css 精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图都包含到一张大图中去加载。可以减少图片的质量,网页的图片加载速度快,减少图片的请求的次数,加快网页的找开。

{ background:url() no-repeat x y; }

 

 

 

 

 

 

 

 

 

© 著作权归作者所有

s
粉丝 0
博文 10
码字总数 10445
作品 0
深圳
私信 提问
探究 HTML元素的水平垂直居中

HTML: <body> <div class="maxbox"> <div class="minbox align-center"></div> </div></body> 父元素 .maxbox{ position: relative; width: 500px; height: 500px; margin: 5px; box-shado......

我输过但从未怕过
2016/03/04
25
0
css(表现层)Cascading Style Sheets层叠样式表

HTML:===> 结构层 css:===> 表现层 js:===> 行为层 css的常用三种类型选择器: 1、基本选择器: id class 标签 * 逗号选择器(,) 2、包含选择器: 子代选择器(>) 后代选择器(空格) ...

AAA年华
2017/12/09
0
0
07/24 CSS中position总结

我们常常使postion用于层的定位,有时一个布局中有几个小对象,不易用css padding margin进行定位,这个时候我们就可以使用position的absolute、relative(绝对定位、相对定位)来轻松搞定。...

Winnie007
2016/07/27
25
0
Java程序员从笨鸟到菜鸟之(十七)CSS基础积累总结(下)

七.组织元素(span和div) span和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML元素对于CSS是很重要的。 ...

长平狐
2012/11/12
244
0
css中float和position属性

盒子的三种定位形式 在标准流下的定位 在浮动属性下的定位 在定位属性下的定位 除非设置浮动属性或定位属性,否则所有盒子都是在标准流中定位 顾名思义,标准流中元素盒子的位置由元素在HTM...

RanoB
2016/12/26
44
0

没有更多内容

加载失败,请刷新页面

加载更多

前端的一些雕虫小技,从100%和滚动条说起

1、100%和滚动条 当我们在css中把html和body同时设为100%时,会出现滚动条 html, body { width: 100%; height: 100%; } 原因是html和b...

wphmoon
31分钟前
6
0
电力区块链应用案例【2019】

随着区块链技术的日益普及,出现了大量创业企业尝试使用区块链技术来解决能源与电力行业中存在的问题。在本文中,我们将介绍其中的三个能源区块链项目。 能源行业以价格不透明著称:消费者很...

汇智网教程
53分钟前
7
0
聊聊rocketmq的adjustThreadPoolNumsThreshold

序 本文主要研究一下rocketmq的adjustThreadPoolNumsThreshold DefaultMQPushConsumer rocketmq-client-4.5.2-sources.jar!/org/apache/rocketmq/client/consumer/DefaultMQPushConsumer.ja......

go4it
今天
9
0
关于早起

早起是非常好的事情,但是像如果前一天睡得晚,或者第二天早上是非常冷的时候,那就不是很美好了。 但是本身早起是一件非常棒的事情,我记得我每次早起 如果不觉得困的话,世界是那么安静,脑...

T型人才追梦者
今天
7
0
Java输入输出

JDK中的InputStream/OutputStream构成了IO输入输出继承层次的基础。它们都是面向字节序列的,每次可以从序列中读入或者写出一个字节或者指定大小的字节数组。但是面向字节流的输入输出不便于...

ytuan996
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部