div 居顶

div 居顶,第1张

首先,div需要关闭标记。
你的这段代码如果正常运行,屏幕上什么也没有。
<div style="margin:0 auto; text-align:center; border: solid 1px #cccccc;width: 450px; height: 350px;">bbb</div>
这行代码使得div居中显示,且大小不变。
我不知道你的自适应指的什么??

用CSS的时候习惯性格式化一下例如:body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{

-x-system-font:none;

font-family:"宋体",Corbel,Verdana,Helvetica,sans-serif;

font-size:12px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:normal;

line-height:normal;

margin:0;

padding:0;

text-align:left;}因为BODY有自己默认的样式

<html >
<head>
<title>Document</title>
</head>
<body>
<div style="position:fixed; top:0px; left:10px; width:100px; height:100px; border:solid 2px blue;">
<p>123</p> <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p> <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
</div>
</body>
</html>

div{
margin-left : 0px;//距离左端距离
margin-right : 0px;//距离右端距离
margin-top : 0px;//距离顶端距离
}

这个问题已经回答过,如下所示

设置style 中 z-index:auto

auto可定义为一个值(整数数字),越大代表越置前,如可定义为: z-index:999。

若定义为-1,代表为最底层。

div的图层由div的style中的z-index来决定,z-index是层垂直屏幕的坐标,0最小,越大的话位置越靠上。

·测试效果:

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="utf-8" />    
<title>div图层样式</title>    
<style>    
div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px}    
div-a{ position:absolute; left:30px; top:30px; background:#F00; width:200px; height:100px}    
/ css注释说明: 背景为红色 /    
div-b{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px}    
/ 背景为 /    
div-c{ position:absolute; left:80px; top:80px; background:#00F; width:300px; height:300px}    
/ DIV背景颜色为蓝色 /    
</style>    
</head>    
<body>    
<div class="div-relative">    
<div class="div-a">我背景为红色</div>    
<div class="div-b">我背景为</div>    
<div class="div-c">我背景为蓝色</div>    
</div>    
</body>    
</html>

2、页面中实现的效果如下:

参考链接:>

在上面加个div层,让它浮于上方步骤如下:

创建一个描述中的div图层。



2在上一个图层的上方新建一个div。

3为了方便看出来上方div的位置,设置其属性之后如下。

这样在上面加个div层,让它浮于上方的问题就解决了。

扩展资料:


<div> 元素

1HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

2<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

3如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

4<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/10548375.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-09
下一篇 2023-05-09

发表评论

登录后才能评论

评论列表(0条)

保存