css定位 position_技术问答

是这个吗？老师设置了一个并列的div元素，所以绝对定位的div在名为box的下面。

2021-10-12 1回答·387浏览

html,body{
    width: 100%;
    height: 100%;
}

这样就可以了

2020-09-14 2回答·703浏览

蒹葭苍沧

图片怎么搞出来啊

哎，怎么切啊，这个不好搞啊

2020-09-14 4回答·609浏览

蒹葭苍沧

老师，inherit这个没听明白，感觉state，fixed，inherit用的比较少: 简单说就是子元素继承父元素的position属性; 2020-09-14 1回答·600浏览

TokugawaNakashima

一个特别低级的HTML问题。。。。。

已采纳慕前端5029702 的回答

width:500px;
height:500px;
宽高后面要带单位 px

2020-09-10 1回答·570浏览

鼬神ss

请帮我看下，为什么我的鼠标滑到一级菜单，二级三级菜单都会显示，我想实现鼠标滑到二级菜单的时候，三级菜单才会显示

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

*{

margin:0;

padding:0;

}

.zed{

width:160px;

height:120px;

position:absolute;

left:0;

top:50%;

margin-top:-60px;

}

li{

list-style:none;

width:160px;

height:40px;

border-bottom:1px solid #ccc;

background:red;

text-align:center;

line-height:40px;

position:static;

}

.faker{

display:none;

width:160px;

height:120px;

position:relative;

left:160px;

top:-40px

}

.faker li{

width:160px;

height:40px;

border-bottom:1px solid yellow;

text-align:center;

line-height:40px;

}

.alex{

display:none;

width:160px;

height:120px;

position:absolute;

left:160px;

top:50%;

margin-top:22px;

}

.zed>li:hover{

background:blue;

}

.zed>li:hover .faker{

display:block;

}

.zed>li:hover ul li{

background:blue;

}

.faker>li:hover{

background:blue;

}

.faker>li:hover .alex{

display:block;

}

.faker>li:hover ul li{

background:blue;

}

</style>

</head>

<body>

<li>精品资源

</ul>

</li>

<li>慕课网

<li>javascript

</ul>

</li>

</ul>

</li>

<li>编程达人

</ul>

</li>

</ul>

</body>

</html>

同学是这个，前面用猎豹浏览器复制格式就乱了

2020-04-07 2回答·962浏览

qq_慕勒3396658

所以index就是用来决定元素层叠优先级的: 是的，但是必须和position 属性搭配使用; 2020-03-18 1回答·717浏览

慕无忌4172087

CSS优先级问题！！！！！: 已采纳此去经年01 的回答; css的优先级是后面大于前面，但是这个得是在权重一样的情况下，权重不一样的情况下权重大的优先。你.first_ ul li的权重大于.third li，为什么呢，class选择器权重是10，标签选择器是1。(权重) .first_ ul li = 10 + 1 + 1 = 12。.third li = 10 + 1=11.。 12 > 11 所以无法覆盖; 2020-03-18 1回答·887浏览

qq_瓶中沙_2

margin居中问题

假如父元素为div，子元素为ul，div高度之所以设置成auto，是因为一开始不知道里面有几个li，这样的话，div的高度可以由li来撑开。然后就分为两种情况了：

第一种，你知道每个li的高度，且知道一共多少个li，假如每个li的高度为40px，一共3个li，那么div的高度就是120px。相应的，给div设置margin-top：-60px就可以达到垂直方向居中的效果。

第二种，你无法确定li的高度和数量的时候，那么div的高度也就无从得知。这个时候可以这么给div设置：

div{

position:absolute;

top:50%;

transform:translateY(-50%);

}

再给div设置top：50%之后，加上transform:translateY(-50%)，这句代码的意思是div沿着垂直方向向下移动自身高度-50%的距离，实际效果也就是div会向上移动自身高度的50%，这样div在垂直方向上就居中了。

其实比较建议这种设置方法，无论div的高度是否知道，这样都可以使div绝对垂直居中。

2019-12-03 1回答·841浏览

okkkkkk

相对定位和绝对定位的层级关系: 在没有设置z-index的情况下，相对定位和绝对定位的层级关系是顺序关系。; 2019-11-28 1回答·1479浏览

挽哥哥

z-index提供了那三个参数？？: 2019-10-24 2回答·848浏览

挽哥哥

说有三个参数: auto，number，inherit; 2019-10-24 1回答·696浏览

极致艺术港仔

说的一点都不是很到点，说的抽象了。: 一句话就是z-index的决定方式：所属的层叠上下文和元素本身的层叠级别; 2019-10-21 1回答·711浏览

weixin_慕斯卡4157084

老师我想问一下 -50px是什么意思: y轴（负）; 2019-10-07 1回答·1711浏览

qq_我不可以不笑的_iryHIV

如果参数是负的呢

不等同。left:50px，表示距离左边50px，实际是向右偏移；left:-50px表示距离左边-50px，实际是向左偏移。

right:50px，表示距离右边的距离。

2019-07-27 1回答·742浏览

qq_慕设计8311266

请问半通明罩从哪里得到啊？: 写div层，在设置背景色background:rgba(0,0,0,0.8)，其中0.8是控制该背景色的透明程度; 2019-07-18 2回答·532浏览

慕瓜2019

为什么侧边栏的第一层不使用ul、li，而使用div呢？: 我明白为什么了; 2019-07-11 3回答·1122浏览

慕设计8092143

代码到显示页怎么切换的？: alt + tab切换窗口; 2019-07-10 2回答·756浏览

慕设计8092143

为什么会显示波浪线啊？: 已采纳随心183 的回答; position:relative这个语句少了一个分号; 2019-07-10 1回答·743浏览

慕侠1197081

怎么把栏目横向排列

可以用

li { display: inline-block；}

li { float ：left；}

这两个二选一

2019-06-03 2回答·820浏览

精慕门9489428

侧边栏问题: 感觉你再hover后面没有跟对相关class 建议贴出代码一起鉴赏下; 2019-05-30 1回答·777浏览

170050122_杨

想知道老师用的编写代码的软件是什么: 老师是用mac系统，有类似的ide，sublimetext3; 2019-05-14 2回答·761浏览

慕九州5488076

父子元素position中的absolute和relative问题: 问题2：relative是相对于原来的位置进行的偏移，而且不脱离文档流，还是占据之前的空间位置，这样显示是对的; 2019-05-08 2回答·1667浏览

qq_hollow_cmvOR0

什么时候用正值什么时候用负值？

top正为向下负为向上

left正为向右负为向左

就像我们之前的以为老师说的：你试试啊，试试电脑又不会爆炸

2019-04-20 1回答·1132浏览

aaagain

我的二级栏目不能居中: 是二级块不能居中吗; 2019-04-14 1回答·892浏览

慕粉4805097

出不来效果: 做出来了; 2019-04-12 1回答·381浏览

慕设计6273740

这个的作用是什么？: 去掉外边界和内边界距离; 2019-03-28 1回答·930浏览

慕容0338126

宽度和高度

div宽度的值固定不变 用px div宽度的值需要跟随父级div的变化而变化 用百分比

2019-03-13 1回答·867浏览

wade49

这个demo有没有地方下载

这是下面某位童鞋的代码，有一行写错了，看底楼的回答

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Html Css Study：导航跟随效果</title>

*{

padding: 0;

margin: 0;

}

.page{

width: 100%;

height: 800px;

background: url(images/girl.jpg) center top no-repeat;

}

.nav{

width: 160px;

height: 205px;

pozition: fixed;

left: 0;

top: 50%;

margin-top: 103px;

font-family: 'Miscrosoft YaHei';

}

.nav-li{

width: 160px;

height: auto;

border-bottom: 1px solid #FFF;

background: #333;

text-align: center;

line-height: 40px;

color: #FFF;

font-size: 16px;

cursor: pointer;

}

.nav-li ul{

width:160px;

height: auto;

background: #FFF;

display: none;

}

.nav-li:hover ul{

display: block;

}

.nav-li ul li{

width:160px;

height: 40px;

border-bottom: 1px dashed #666;

color: #333;

text-align: center;

line-height: 40px;

position: relative;

}

.tit{

width:160px;

height: 40px;

}

.nav-li ul li:hover .list-3{

display: block;

}

.list-3{

width:160px;

height: auto;

position: absolute;

left: 160px;

top: 0px;

display: none;

}

.list-3Dom{

width:160px;

height: 40px;

border-bottom: 1px solid #FFF;

background: #444;

text-align: center;

line-height: 40px;

color: #FFF;

}

</style>

</head>

<body>

<div class="tit">慕课网的标题</div>

<ul>

<li>

二级栏目

</div>

</li>

<li>

二级栏目

</div>

</li>

<li>

二级栏目

</div>

</li>

</ul>

</div>

<div class="tit">慕课网的标题</div>

<ul>

<li>

二级栏目

</li>

<li>

二级栏目

</li>

<li>

二级栏目

</li>

</ul>

</div>

<div class="tit">慕课网的标题</div>

<ul>

<li>

二级栏目

</li>

<li>

二级栏目

</li>

<li>

二级栏目

</li>

</ul>

</div>

<div class="tit">慕课网的标题</div>

<ul>

<li>

二级栏目

</li>

<li>

二级栏目

</li>

<li>

二级栏目

</li>

</ul>

</div>

<div class="tit">慕课网的标题</div>

<ul>

<li>

二级栏目

</li>

<li>

二级栏目

</li>

<li>

二级栏目

</li>

</ul>

</div>

</body>

</html>

2019-01-28 1回答·1024浏览

技术渣渣ss

请帮我看一下，为什么我的二级栏目不能出现在标题的下面: 没有设置元素的堆叠顺序; 2019-01-23 1回答·1542浏览