css布局之上下两行布局(上面固定高度,下面自适应)

html-css012

css布局之上下两行布局(上面固定高度,下面自适应),第1张

方法一: 利用position绝对定位+BFC

html:

css:

方法二:flex布局

html:

css:

重叠在一起需要改变默认的布局方式,将其中一个显示在上层需要设置深度顺序,这两点分别用如下样式完成

position: absolute /*设置为绝对定位*/

z-index:999        /*设置重叠的上下次序,值越大月在上方*/

示例如下

创建Html元素

<div class="top">

<div class="b">我是绝对定位,并且重叠在上方</div>

<div class="a">我是默认定位</div>

</div>

设置css样式

div.top{margin:50pxpadding:20pxwidth:200pxheight:200pxborder:2px dashed #ebbcbe}

div.top div{width:100pxheight:100pxpadding:10pxcolor:white}

div.a{background:red}

div.b{background:greenposition:absolutetop:100pxleft:100pxz-index:999}

观察显示效果

分类: 电脑/网络 >>程序设计 >>其他编程语言

问题描述:

只用CSS让背景层固定不动,在背景层上还有个层它随滚动条?

这个怎么实现哦

解析:

background-image,用它可以指定整个网页的背景图片(将它放在BODY标签内),也可以是某一个单词。

background-repeat 是否循环背景

p {background-repeat:no-repeatbackground-image:url(background.gif)}/*不循环*/

p {background-repeat:repeatbackground-image:url(background.gif)}/*循环*/

background-attachment 是否固定背景

body {background-attachment:scrollbackground-image:url(background.gif)}/*随文字一起滚动*/

body {background-attachment:fixedbackground-image:url(background.gif)}/*固定不动*/