码迷,mamicode.com
首页 > 其他好文 > 详细

10月19日笔记

时间:2016-10-20 01:05:04      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:absolute   relative   position   图片   center   

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>lianxi</title>

<style>

#bj,.tup{

width: 300px;

height: 500px; 

position: relative;

/*relative相对定位 相对于自己原来的位置移动*/

}

#xia{

width: 300px;

height:100px;

background-color: red;

position: absolute;

/*absolute绝对定位,相对于具有position属性的父级元素移动,没有position属性就相对于body移动*/

top: 400px;

opacity: 0.3;

text-align: center;

}

</style>

</head>

<body>

<div id="bj">

<img class="tup" src="./4.png" >

<div id="xia">

<h1>图片说明</h1>

</div>

</div>

</body>

</html>


10月19日笔记

标签:absolute   relative   position   图片   center   

原文地址:http://12155715.blog.51cto.com/12145715/1863538

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!