masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial css > CSS中的绝对定位与相对定位详细介绍

CSS中的绝对定位与相对定位详细介绍

高洛峰

Lepaskan： 2017-03-27 09:13:17

asal

2060 orang telah melayarinya

层级关系为：

效果图：

CSS中的绝对定位与相对定位详细介绍

为改变参照物（橘色框）后的效果
层级关系为：

效果图：

CSS中的绝对定位与相对定位详细介绍

参照物为最顶级的元素情况。
层级关系为：

效果图：

CSS中的绝对定位与相对定位详细介绍

仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：

效果图：

CSS中的绝对定位与相对定位详细介绍

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：

效果图：

CSS中的绝对定位与相对定位详细介绍

Atas ialah kandungan terperinci CSS中的绝对定位与相对定位详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css

sumber：php.cn

Artikel sebelumnya：详解Css中的盒模型及盒模型宽度计算方法 Artikel seterusnya：CSS中left属性详细介绍

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

html设置加粗、倾斜、下划线、删除线等字体效果示例介绍

1970-01-01 08:00:00
实现一个 Java 版的 Redis

1970-01-01 08:00:00
最简单的微信小程序Demo

1970-01-01 08:00:00
python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍

1970-01-01 08:00:00
微信小程序：如何实现tabs选项卡效果示例

1970-01-01 08:00:00
Python构造自定义方法来美化字典结构输出

1970-01-01 08:00:00
HTML5:使用Canvas实时处理Video

1970-01-01 08:00:00
Asp.net使用SignalR实现发送图片

1970-01-01 08:00:00
微信小程序开发教程-App()和Page()函数概述

1970-01-01 08:00:00
详解python redis使用方法

1970-01-01 08:00:00

Isu terkini

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1335

Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...

daripada 2024-04-06 21:58:04

0

1

800

Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...

daripada 2024-04-06 20:57:16

0

1

487

Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...

daripada 2024-04-06 20:45:26

0

2

386

Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...

daripada 2024-04-06 20:41:51

0

1

518

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan