html 相对定位 绝对 定位 css + div

最新推荐文章于 2024-08-09 06:13:01 发布
最新推荐文章于 2024-08-09 06:13:01 发布
阅读量82 收藏
点赞数
文章标签： xhtml 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 0 Transitional//EN"
"http://www.worg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.worg/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;
        charset=gb2312" />
        <title>Div + CSS Example, Wayhome's Blog</title>
        <style type="text/css">
            <!--
            body,td,th{font-family:Verdana;font-size:9px;}
            -->
    </style></head>
    <body>
        <div style="position:absolute; top:5px; right:20px; width:200px;
            height:180px; background:#00FF00;">
            position: absolute;<br />
            top: 5px;<br />
            right: 20px;<br />
            <div style="position:absolute; left:20px; bottom:10px;
                width:100px; height:100px; background:#00FFFF;">
                position: absolute;<br />

                left: 20px;<br />
                bottom: 10px;<br />
            </div>
        </div>
        <div style="position:absolute; top:5px; left:5px; width:100px;
            height:100px; background:#00FF00;">
            position: absolute;<br />
            top: 5px;<br />
            left: 5px;<br />
        </div>
        <div style="position:relative; left:150px; width:300px; height:50px;
            background:#FF9933;">
            position: relative;<br />
            left: 150px;<br />
            <br />
            width: 300px; height: 50px; <br />
        </div>
        <div style="text-align:center; background:#ccc;">
            <div style="margin:0 auto; width:600px;
                background:#FF66CC; text-align:left;">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
                <div style="padding:20px 0 0 20px; background:#FFFF00;">
                    padding: 20px 0 0 20px;
                    <div style="position:absolute; width:100px; height:100px;
                        background:#FF0000;">position: <span style="color:#fff;
                            ">absolute</span>;</div>
                    <div style="position:relative; left:200px; width:500px;
                        height:300px; background:#FF9933;">
                        position: <span style="color:blue;">relative</span>;<br
                        />
                        left: 200px;<br />
                        <br />
                        width: 300px;<br />
                        height: 300px;<br />
                        <div style="position:absolute; top:20px; right:20px;
                            width:100px; height:100px; background:#00FFFF;">
                            position: absolute;<br />
                            top: 20px;<br />
                            right: 20px;<br /></div>
                        <div style="position:absolute; bottom:20px; left:20px;
                            width:100px; height:100px; background:#00FFFF;">
                            position: absolute;<br />
                            bottom: 20px;<br />
                            left: 20px;<br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
weixin_33941350
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML---定位
zhoutong2323的博客
12-25 2050
HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性，包括position、top、bottom、left和right等。position属性指定了元素的定位方式，常用的取值有static、relative、absolute和fixed。通过设置不同的position值，可以实现元素的不同定位方式。top、bottom、left和right属性用于精确地定位元素的位置。当position属性的值为relative时，这些属性参照的是元素自身的位置进行调整；
HTML定位
weixin_52173610的博客
08-30 5273
在 HTML 中，可以使用 CSS 来对元素进行定位。常见的定位方式有相对定位(relative)，绝对定位(absolute)，固定定位(fixed)，和粘性定位(sticky)。- 相对定位(relative)：元素相对于其正常位置进行定位，通过 top、bottom、left、right 属性来指定偏移量。- 绝对定位(absolute)：元素相对于其最近的已定位祖先元素(非 static 定位)进行定位，或者相对于文档的初始坐标定位。
定位的概念（HTML）
原地起飞
07-31 1491
文章目录前言HTML中为什么需要定位？一、定位1.定位的组成2.定位模式1、static 静态定位 (默认)2、relative 相对定位3、absolute 绝对定位4、fixed 固定定位5、粘性定位sticky （了解）总结 前言 HTML中为什么需要定位？ 1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子 一、定位 1.定位的组成 定位=定位模式+边偏移 &nbs
html在页面上div绝对定位,html div出现在绝对定位元素之上
weixin_35715402的博客
06-05 348
我有一个父div设置为亲戚。然后我有一个子div定位绝对，它拥有几个嵌套的子div本身。与同一课程。我已经实现了我想要的布局，但是当我离开并在上面提到的部分下面开始一个新的部分/ div时，它的内容显示在上面的div之上。不知道为什么。我希望div 从一个新行开始，而不是干扰它上面的div，这正是发生的事情。我的代码如下所示。TOP SELLING PROTEIN RANGE ...
html div绝对定位居中
weixin_44442366的博客
01-27 493
<div class="parent-frame" style="position: relative;"> 利用绝对定位，配合translate移动到水平垂直居中。 <div class="child-frame" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> </div> </div> ...
HTML四种定位-绝对定位
Jack, what else can you do besides holding your little darling?
12-04 8091
HTML四种定位-绝对定位
CSS相对定位&绝对定位
weixin_45497246的博客
08-06 712
CSS相对定位&绝对定位 一、相对定位（relative） 相对定位是指 —— 该元素相对于原来的位置偏移，宽高都没变，撑大了容器。 特别的： （1）元素偏移之后仍处在文档流中，不影响其他元素的布局。 （2）元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 （3）最外层容器设置为relative定位，在未设宽度的情况下，宽度是整个浏览器的宽度。 举例： 对两个div块设置相对定位和绝...
HTML相对定位与绝对定位
weixin_64790984的博客
08-25 318
position: relative; 相对定位 相对于原来位置的定位 但是移动位置相对与原来的位置 位置依然保留 position: absolute 绝对定位 会脱标 相对于父亲的定位 绝对定位找最近一级的相对定位找爹
div+css详解定位与定位应用
10-30
### div+css详解定位与定位应用 #### 一、引言 在Web开发中，页面布局至关重要，良好的布局能够使网站既美观又实用。而`div+css`作为现代网页设计的重要组成部分，其中的定位技术更是核心之一。本文将深入探讨`div+...
CSS网页布局教程:绝对定位和相对定位
12-07
本文将深入探讨相对定位和绝对定位，这两种定位方式在网页布局中的应用和区别。 相对定位（Relative Positioning）是CSS中的一种定位模式，通过设置`position`属性为`relative`实现。相对定位元素不会脱离正常的...
淘宝首页web前端课设（HTML+css+js）
06-10
css样式修饰用到最多的是绝对定位和相对定位，边框修饰，文字修饰，颜色美化等。js用了100多行代码做了一个轮播图效果。 简单总结： 1.没有看过做成效果图的先看我的博客。 2.web大多常用的知识点都以用上 3.该资源...
CSS+DIV定位浅析
03-03
图3和图4进一步说明了relative和absolute的区别，前者总是相对于最近的静态定位父元素，后者则是相对于最近的绝对或相对定位的父元素。 `fixed`定位与absolute类似，但它不是相对于父元素，而是始终相对于浏览器...
通过绝对定位实现div重叠实例代码
09-25
在给出的代码示例中，有三个div（`.div-a`、`.div-b`和`.div-c`），它们都是绝对定位的，并且都在`.div-relative`这个相对定位的容器内。通过调整各自的`left`、`top`属性，使得这些div在页面上重叠。 `.div-a`位于...
html div相对位置,div的相对定位与绝对定位
weixin_39524741的博客
06-04 2497
这几个部分都是可以通过CSS进行指定的，当然，CSS还可以控制背景，因此，我们可以通过CSS来灵活控制我们页面的外观。二、CSS中的文档流模型所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的(当然，嵌套不在此列)，每一个块都会另起一行。如下图他们对应的html如下：div1div2div3为了定义他们的宽度、高度还有边框，我们定义如下的CSS：#div1 {border: 1px...
html中的相对定位 和 绝对定位
热门推荐
gengbaolong的博客
04-30 3万+
html中positon:relative; position:absolute;
html中相对位置与绝对位置
由于须的博客
06-11 3万+
用户在浏览网站时经常会看到左侧有一种宣传栏，它不会随着鼠标滚动而不被用户看到，它会始终以页面的中心为参照物始终保持在左侧一个固定的位置，今天我们来做一下这个小例子，让我们先了解一下盒模型和相对丶绝对位置的前端知识。盒模型分为两种一种是标准模型，另一种是IE模型，它的组成由外向里是margin，border，padding，content，如下两个图所示。标准模型，宽高均为内容（content）的宽...
html如何设置绝对定位,css教程之绝对定位使用详解
weixin_29635155的博客
06-07 5793
一.基本概念:如果说相对定位没有脱离文档流，相对于对象本身进行偏移有点拖泥带水的话，那么绝对定位绝对是快刀斩乱麻，因为绝对定位可以使一个对象脱离正常的文档流，好像是漂浮在正常文档流的上空,并相对于包含此对象的元素进行定位，当然这个定位相对元素在不同的情况下也有所不同。二.如何将一个元素设置为绝对定位:为对象添加如下属性即可将对象设置为绝对定位:复制代码代码如下:position:absolute;...
CSS中几种控制页面布局的定位机制（相对定位与绝对定位）
duang0626的博客
07-13 1万+
CSS中几种控制页面布局的定位机制对于web的初学者来说，CSS中的几种定位方式经常让人摸不着头脑，从而达不到想要的页面布局效果，我去年学习web编程的时候就对这个一知半解，今天，回过头来再次学习web编程，趁有时间就好好总结一下CSS中的几种定位方式，也当自己再学习巩固一下。CSS中包含三种控制页面布局的定位机制：普通流、相对定位、绝对定位。在CSS中通过position属性表明定位机制。此外还可
XHTML 简介
最新发布
lly202406的博客
08-09 412
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
2天精通CSS+DIV前端布局实战教程
此外，还包括定位技术的学习，如相对定位、绝对定位和固定定位，这些都是实现复杂网页布局的关键。 技巧篇则分享了一些专业的小技巧，如CSS Sprites技术，它可以减少网页加载时间，优化性能。还有首行文字缩进的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值