masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > position中的困惑，帮忙解决一下_html/css_WEB-ITnose

position中的困惑，帮忙解决一下_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-21 08:49:00
asal
1065 orang telah melayarinya

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<style>	*{		margin:0;		padding:0;	}	.parent{		background: red;		position: absolute;		left:60px;		width: 300px;		height: 300px;	}	.childRight{		background: blue;		width: 240px;		position: relative;		right:60px;	}	.child-Right{		background: yellow;		width: 240px;		position: relative;		right:-60px;	}	.childLeft{		background: blue;		width: 240px;		position: relative;		left:60px;	}	.child-Left{		background: yellow;		width: 240px;		position: relative;		left:-60px;	}	</style></head><body>	<div class="parent">parent		<div class="childRight">childRight</div>		<div class="child-Right">child-Right</div>		<div class-"childLeft">childLeft</div>		<div class="child-Left">child-Left</div>	</div>	<div style="width:300px;height:300px;border:1px solid #000">hello</div></body></html>
Salin selepas log masuk

大家帮忙看一下，父标签设置绝对定位，子标签都设置了相对定位，两个问题：1.为什么right：60px和left：-60px相同，第三个子标签（.childLeft）为什么不显示颜色了？


回复讨论(解决方案)

对，
相对定位情况下，是以元素自身原本的位置进行偏移，右边偏移正60px就等于左边偏移负60px。


为什么不显示颜色
 

childLeft
 

这么明显,等于号你打成减号了

Label berkaitan：
position中的困惑，帮忙解决一下
sumber：php.cn
Artikel sebelumnya：CSS基础教程之常用属性_html/css_WEB-ITnose Artikel seterusnya：跨屏测 Adaptest 移动适配 CSS v1.1 发布_html/css_WEB-ITnose
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
Isu terkini
Apakah perbezaan antara teg HTML <a></a> dan <a href=""></a>? Sesetengah tapak web menggunakan [url]alamat tapak web[/url] dalam kawasan teks mereka dan...
daripada 2024-04-02 22:46:16
0
2
403
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