您的位置：首页 > Web前端 > HTML

html定位

2015-09-11 00:50 537 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Insert title here</title>

<style type="text/css">

body{

}

.back{

width:100%;

position: relative;

}

.coupon{

position: absolute;left: 0;top: 0;

}

.price{position: absolute;left: 13%;

}

</style>

<script src="js/jquery-2.1.4.min.js"></script>

</head>

<body >

<div align="center">

<p>aaaaaa</p>

<p>bbb</p>

<p>ccc</p>

<div class="back"style="width: 89%">

<img alt="" src="1.png" width="100%" class="coupon">

<div class="price">20yuan</div>

</div>

</div>

</body>

<script type="text/javascript">

$(window).load(function(){

$("div.price").css("top",$("img.coupon").height()*0.13);

});

$(window).resize(function() {

$("div.price").css("top",$("img.coupon").height()*0.13);

});

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航