前端CSS浮动的层次问题

如下图,请问怎样将下面的二级菜单栏显示在下面,上面的一级在上面,我试过z-index好像不太管用,请问有好的方法吗?
图片说明

0

1个回答

首先,div模块使用z-index这个属性的时候,他的定位必须是绝对定位的,position:absolute; 你把这个属性加上看看

1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
CSS-层级
CSS 基础知识点1. 小知识1.1 font : 加粗 字号/行高 格式;n行高如果不写,默认为父盒子行高; nu ins 下划线ni em 倾斜ns del 删除线nfont-weight: normal; 加粗变正常nfont-style: normal; 倾斜变正常ntext-decoration: n
css浮动的有关问题
css浮动有关问题css浮动有关问题css浮动有关问题
css 层级问题
关于标签层级问题n1.z-index;n2.标签顺序。z-index解决不了的,就可能是标签顺序问题;nn
前端小结———关于定位和浮动的一些学习心得
对于刚开始学前端的来说,定位和浮动是在页面布局中一定会遇到的,你可能也会跟我一样会感觉有点晕乎乎,但是其实理解并实际操作之后就会理清楚他们之间的关系,并且很好的利用在页面布局当中。以下是我的一些学习总结,前端小白一枚,如有不足之处,还望各路大神多多指教。nn定位(position)主要有以下几个:n1、static,静态定位,也是网页中默认的定位,属于在正常的文档流当中。nn2、relative,...
CSS浮动案例
CSS:浮动案例1n<!DOCTYPE html>n<html lang="en">n<head>n <meta charset="UTF-8">n <title>This is a demo</title>n <style>n div{n
前端系列之CSS(float浮动)
float属性介绍float中的四个参数: n-float: left n-float:right n-float:none n-float:inherit //继承浮动我们可以使用float属性实现文本环绕效果实例应用<!DOCTYPE html>n<html lang="en">n<head>n <meta charset="UTF-8">n <title>float</title>
CSS Float(浮动)的原理和工作方式,以及浮动造成的问题总结
什么是 CSS Float(浮动)?nnCSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。nnFloat(浮动),往往是用于图像,但它在布局时一样非常有用。nn浮动元素会生成一个块级框,而不论它本身是何种元素。nn如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。nn注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程...
css浮动案例
彼此相邻的浮动元素清除浮动 - 使用 clear元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊:使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。事例案列:&amp;lt;style&amp;gt;* {    box-sizing: border-box;}body {    ma...
用CSS动画实现浮动跳动效果
在很多前端的网页动态效果中,我们需要实现一个动态上下回动的效果,下去之后渐渐变慢,回去之后也是先快后缓。rn       当然,这样的动画使用JS源代码或者其他方法都可以实现,但是有的活血会很复杂,这里提供一种简单的方法实现跳动效果。rn     算了直接上源码。但是这个必须在高版本浏览器中有用,不得不说万恶的IE,我没有测试其他的浏览器,只是提供了这种方法。rnrnrn rnrnrnrnDocu
前端——css浮动现象
文章目录先看简单示例看效果:脱标贴靠字围紧凑n先看简单示例n&amp;lt;style type=&quot;text/css&quot;&amp;gt;n *{n padding:0;n margin:0;n }n .box1{n width: 300px;n height:300px;n background-color: red;n /*加浮动*/n float:left;n }n .bo...
前端人生——CSS(盒子,浮动,定位)
出现原因:样式写在骨架里面,会变得很复杂。应该达到——结构就应该写结构。外观就应该写外观。rnCSS:控制外观显示样式rnCSS书写位置rnrn内部样式表(样式与结构部分分离)rnrn&amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;gt;rn ...rn &amp;amp;amp;amp;amp;lt;style&amp;amp;amp;amp;amp;gt;rn 选择器{属性:值;} /*选择器----选择标签*/rn th{color: skyblu
前端css属性难点
text-transform:uppercase;有何用? nmargin:0.5em 0中的em与px有什么区别? noverflow:hidden有什么用? nvertical-align: top;什么意思? nfont: inherit;什么意思? n cursor:pointer; n关于元素局中问题 n如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? n需要的主
一天搞定CSS: 浮动(float)及文档流--10
一天搞定CSS: 浮动(float)及文档流--10
HTML中部分元素介绍和CSS的层级关系
&amp;lt;div&amp;gt;元素&amp;lt;div&amp;gt;元素是块级元素,他可用于组合其他HTML元素的容器。&amp;lt;div&amp;gt;元素没有特定的含义。由于他属于块级元素,浏览器会在其前后显示换行。使用CSS,&amp;lt;div&amp;gt;元素可以对所对应的内容块设置样式属性。&amp;lt;span&amp;gt;元素&amp;lt;span&amp;gt;元素可作用文本的容器,没有特定的含义。使用CSS时,&amp;lt;span&amp;gt;元素可用于部
前端——css浮动的影响与清除
子元素如果是浮动元素,那父元素一般不设置高度,可能造成布局混乱以后更改麻烦,不设置高度也会出现混乱n&amp;lt;div class=&quot;father&quot;&amp;gt;n &amp;lt;div class=&quot;box1&quot;&amp;gt;&amp;lt;/div&amp;gt;n &amp;lt;div class=&quot;box2&quot;&amp;gt;&amp;lt;/div&amp;gt;n &amp;lt;div class=&quot;box3&
css+js实现 不影响周边内容的浮动图片
1.目标n在网页中,图片以缩小的尺寸显示 ,图片四周可环绕文字 ,当鼠标悬停于图片时,图片向右向下放大,覆盖周围的文字或其他内容,这个过程中,周围的文字或其他内容的位置不发生变化 ,鼠标离开图片,图片恢复为原尺寸,放大的恢复的过程是渐变的,不是瞬间完成的。n2.思路n图片的尺寸发生变化而周围的内容不发生变化,这就不能仅靠float来实现 ,应该用float实现 浮动时,如尺寸发生变化 ,周围
CSS 优先级和定位
css优先级rn!Importang 10000rn行内       1000rn. Id选择器  100rn类选择器(:hover伪类)10rnP  标签 属性选择器 1rn继承  0.1rn默认值 0rn rn其他:1.同等优先级 看先后顺序 后写的优先rn      2.空格 层次选择器 优先级叠加 rnrn      .show .main{}rn      3文内的样式优先级为1,0,0
前端基础与CSS中的浮动
HTML元素分为五种:n① 空内容元素(Void elements)n 没有内容,也没有结束标签。n area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbrn② 原始文本元素(Raw text elements)n 可以有文本内容。
【前端】【html/css】前端学习之路(十):浮动(float/版心布局/清除浮动)
1.浮动(float)    
css解决浮动带来的父级div高度不自动增加的问题
当设置为float时,父级不会自动计算float的高度,所以导致父级没有被float的内容撑开,下面有几种解决办法方法一、设置父级为固定高度方法二、在父级最后添加一个空的class为“clear”,div<div class="clear"></div>n“clear”的css为:.clear{ clear:both} 方法三、使用after伪类(推荐)div:after{ncontent:".";
前端——CSS:浅谈对float的理解
 nn我之前仿做百度首页,将整个页面整体布局完并写好之后,发现我的网页中的部分块会随着网页大小的变化而移位。我尝试了很多方法,调完之后,还是发现有一个块始终没有办法乖乖到我预想的位置。如下所示:nnnndiv_foot这个块,按我的想法是应该在百度一下这个框下边的,但是不知道为什么总是在上面,如果我调整margin-top的数值,它也是以顶端为基准。在仔细查看了代码之后,终于发现,原来它前边的di...
css定位和浮动
本篇文章主要写的是css中的浮动和定位布局,让刚入前端不明白布局的刻印轻松掌握这两个方面的布局,并且还有简单的万花筒代码和淘宝商品展示布局代码演示定位:css中常见的定位有相对和绝对定位。说到定位,就从它的属性position说起。在css中属性position的值有6个,学好这6个值,对定位就会有基本的掌握。重点通过它的属性值来介绍定位的了解。position属性值:relative:1.  相...
css清除浮动(css 解决浮动元素引起的高度问题)
首先了解两个概念:nn文档流:文档流是文档中可显示对象在排列时所占用的位置。n 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。n浮动的实际用途,可设置文字环绕或使元素宽度由内容填充(类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高,那么需要设置父级容器的overflow属性为auto,使其自动撑满。nn nn本人经常...
CSS 浮动为什么会塌陷以及解决方案
CSS 浮动为什么会塌陷nnnn浮动nn浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 n浮动脱离文档流,所以文档的普通流中的块框表现得就像浮动框不存在一样。nnnn浮动塌陷nn当元素设置浮动而父元素的宽高没有设置时,高度会塌缩为0。如图 nnnnn解决方案nnnn1 在父元素里面填加一个没宽度高度的元素使用clear:bothnnnn&amp;lt;!DOCTYPE ht...
前端小知识-2-前端页面的3种构成层次
n n n 我们大家在浏览网页的时候看到的各种页面都由三种层次构成:n     n1.结构层次:HTML或XHTML;主要是用这种标记语言对网页的语句含义做出描述n     n2.表现层次:CSS;主要定义了网页中的元素如何显示n     n3.行为层次:主要解决了如何对用户的操作进行反应,各种事件的触发n简单来说就是HTML(XHTML)+CSS+JavaScript来构成nn亲爱的...
浮动布局的方法(总结)
HTML布局中浮动布局非常常见,很多网站普遍都会使用到浮动布局,博客网站使用最多。做过很多网站,却没有总结过,今天就来分享下自己在浮动布局的总结(本文以微博为例)n 微博排版n先上图片: n      盒子中包含左右两个子盒子(用黑边框将其分开),就以这种左右两栏为布局的模型,来总结浮动布局的方法。n 浮动布局HTML排版n <div class="container">
CSS 基础点集锦一:盒子模型、浮动、清除浮动
1、盒子模型:示意图(图片来自w3school):说明:上图中,由内而外依次是 元素内容(content) 内边矩(padding-top、padding-right、padding- bottom、padding-left) 边框(border-top、border-right、border-bottom、border- left) 外边距(marging-top、margin-right、ma
css之浮动以及溢出的处理
本篇主要介绍浮动属性、清除浮动 以及对于溢出的处理方式。rnnn n Div+Css布局(浮动以及溢出处理)n n n body{n padding:0;n margin:0;n }n .div{n width:960px;n height:600px;n margin:0 auto; /*居中处理*/n background-color:#f1
CSS伪元素、伪元素消除浮动、伪类
一、CSS 伪元素用于向某些选择器设置特殊效果。nn1、:first-line 伪元素nn&quot;first-line&quot; 伪元素用于向文本的首行设置特殊样式。nnnnp:first-linen {n color:#ff0000;n font-variant:small-caps;n }nnn注释:&quot;first-line&quot; 伪元素只能用于块级元素。nn注释:下面的属性可应用于 &quot;first-lin...
CSS实现图片向上浮动
CSS实现图片向上浮动
CSS基础之盒子模型及浮动布局
盒模型rn     谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content)、填充(padding)、边框(border)、边界(margin);rn这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。rn先上图:rnrn上图清晰的表明了盒模型的具体表现样式; margin外边距+borde
CSS 浮动和清除浮动的3种方法
浮动的性质:脱标、贴边、字围、收缩。
CSS3实现浮动的箭头
关键技术nn箭头样式:引入fontawesome.css,animate.cssnn箭头浮动:animationnnHTML代码nnn&lt;div class="headertop-down faa-float animated" onclick="headertop_down()"&gt;n &lt;span&gt;n &lt;i class="fa fa-chevron-down" ar...
浮动出现问题解决方法
1.float: right 右浮动时,靠右换行(错行)的解决方法nn当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥。把右浮动的标签放在正常标签的前面即可。nn{forum}{subject}{date1}nn{date1}{forum}{subject}nnnn2.浮动如何换行nn例子如:两个div设置了左浮动,
浮动换行的解决办法
浮动换行阻挡:往往出现在瀑布流布局中,若上一行浮动块高度不一致,就会导致在当前行浮动过程中被阻挡。margin也是浮动块停止的边缘。一般情况下,往往是因为盒子的内容高度不一致,问题最多的是图片。当每个图片的宽高比不一致时,设置相同高度。高度会有差异。 解决办法:移动端:给图片一个固定高,设置object-fit:cover; PC端:图片差异不大时,给所有图片设置相同...
WEB前端 -- 属性选择器与层次选择器
1.层次选择器层次选择器选择器CSS模式JQuery模式描述后代选择器ul li a{}$('ul li a')获取追溯到的多个DOM对象子选择器div &amp;gt; p{}$('div p')只获取子类节点的多个DOM对象next选择器div + p{}$('div + p')只获取某个节点后一个同级DOM对象nextAll选择器div ~p{}$('div ~ p')获取某节点后面所有同级DOM对...
浮动、定位和层级
浮动的概念浮动的代码float:left;//左浮动nfloat:right;//右浮动浮动的特点n浮动的元素会脱离标准流(标准流就是浏览器默认摆放盒子的标准) n浮动后的元素会覆盖在标准流之上n浮动后的元素会改变显示方式(会变成行内块),可以设置宽高n浮动对页面的影响n 如果父盒子中有一个子盒子,父盒子没有设置高度,子盒子浮动,那么父盒子不能被子盒子撑开,即父盒子高度为0,这时下面的盒子会占位。
CSS盒子模型、浮动、定位
一、盒子模型1、css背景(background):css可以添加背景颜色和背景图片来进行图片的设置,比如给一个div盒子,那么div盒子相关背景的属性可以设置以下:背景颜色:div {background-color: red;},给div盒子设置一个红色背景颜色。背景图片:div {background-image: url(图片路径);},给div盒子设置一个背景图片,背景图片我们一般给小背...
为网页前端设置有层次感的背景色
由于白色与普通的颜色来显示网页背景,会感觉很生硬,所以这里总结一下为网页前端设置有层次感的背景色,看起来也会很舒服。rn先要准备好5*500或1*500像素的图片,这些图片都是渐变的颜色图,可以用PS来实现。rn如图:rnrnrnrnrn下面是实现代码:rnnnn n n n body{n background: url(images/bg3.
css div li 使用float但高度不确定造成的错位问题我遇到的(部分360浏览器问题)
今天遇到个CSS样式问题,而且单单在部分人的360浏览器上出现了这样的问题。也是考虑上的失误及经验上的不足。rn是这样的一共是四个div,但高度不定。需要做成两两一行的样式。之前没做多大考虑,直接用了float,在大部分浏览器上并未出现问题。但在360浏览器(别人的)出现错位问题。rn即第一行第一个元素过高导致第三个元素排在了第二个下面。rn网上搜罗了一下方法,在不影响原来布局的情况下,考虑选择放
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java更深层次的学习 nlp课程理解6层次