文档章节

css的fixed属性制作浮动模块

issac宝华
 issac宝华
发布于 2015/10/30 19:24
字数 183
阅读 11
收藏 0

    在制作网页的时候,经常会有这样的需求:我们做的导航栏,不论我怎么往上往下拖网页,都希望导航栏可以在屏幕区域内,这样,用户想要跳到另外的页面就不用回到顶部。


    css属性,fixed;

    举例:

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:fixed;  //fix的基本用法
left:100px;
top:150px
}
</style>
</head>
<body style="height:1000px;">
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p>
</body>
</html>

 

© 著作权归作者所有

issac宝华
粉丝 9
博文 140
码字总数 34397
作品 0
珠海
私信 提问
css的盒子模型

网页布局的本质就是把网页中的元素,例如文字。图片等放在一个盒子里,然后利用css来摆放盒子达成想要的效果,就是网页布局 css的三大模型 1.普通流 2.浮动 元素添加浮动以后,会自动转换成行...

邮币财富-张起荣
2018/03/12
14
0
css中float和position属性

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

RanoB
2016/12/26
44
0
好程序员Web前端分享前端CSS篇

  今天好程序员跟大家分享的文章是CSS篇。Web前端技术由html、css和javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学...

好程序员IT
04/11
4
0
CSS——让“盒子”动起来:② “定位”和 BFC

前言: 这一篇我们主要探讨“定位”和 BFC 是怎样让“盒子”动起来的。 学习方法依然是:打开 JS Bin ,拷贝代码运行查看效果,然后搞定每一行代码的前世今生。 1 什么是“定位” “定位”就...

itsOli
05/01
0
0
【技巧篇】解决悬浮的、遮挡内容的处理技巧

引言 在现在的前端页面中,尤其是移动端,经常会需要将 或者是 模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示。 “回复主题”模块,就是跟随页面的浮动一直悬...

chokcoco
2015/03/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员web前端教程分享常见基础面试题之性能优化

  好程序员web前端教程分享常见基础面试题之性能优化,为了能够更快的通过企业面试,很多人都会背面试题,而性能优化是每一个企业都会问到的问题,今天就给大家分享一下。   性能优化(Op...

好程序员官网
11分钟前
2
0
面试题必问:spring MVC工作流程图

先看下我在网上找的一张图片,图虽然不是很好看但是很详细很清晰 具体解答 用户向服务器发送请求,请求被spring的核心组件DispatcherServlet截获 DispatcherServlet对请求URL进行解析,得到U...

shiliang_feng
12分钟前
3
0
centos7编译安装php7

安装依赖 [root@localhost ~]# yum -y install gcc gcc++ gcc-c++ wget make libxml2 libxml2-devel openssl openssl-devel curl-devel libjpeg-devel libpng-devel freetype-devel bison au......

请叫我足下
12分钟前
3
0
处理Unicode字符 \u202E 问题

这么一段字符串,实际内容应该是123abc456,在获取到的时候就变成下面的内容,肯定要处理呀.... 又得手撸了代码了\u202E : 会将字符串进行翻转,\u202D : 会将字符串互换位置,但为什么从...

小象鸭
17分钟前
2
0
怎么用视频转换器把qsv格式转换成mp4

随着生活水平不断提高消费水平也在不断的增长,与此同时娱乐已经成为了人们生活中重要的一环,在看一些视频时是否会发现例如qsv、qlv和kux等格式是不能用别的播放器打开的,其实这几个格式分...

cenfeng123
26分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部