Heim >Web-Frontend >HTML-Tutorial >css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose
css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-21 09:15:351169Durchsuche
<style type="text/css"> .spot{ position: relative; display: list-item; margin: 5px; width: 30px; height: 30px; border-radius: 60px; left: 98%; } .spot:hover{ background-color: #0080ff; } .header{ background-color: #262626; margin: 20px auto; width: 95%; height: 160px; border-radius: 20px; font-weight: bold; font-size: 25px; color: #2b669a; text-align: center; } .hd_btn_submit,.hd_input{ position: relative; float: right; top:10%; } .show_img{ position: relative; background-color: #245269; height: 500px; width: 80%; border-radius: 20px; left: 35px; } </style></head><body> <div class="header"> <p>标题</p> <button class="hd_btn_submit" type="submit">register</button> <label> <input class="hd_input" type="text"> </label> </div> <div class="container_showImg"> <div class="show_img"></div> <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > </div></body> spot的top：35%没作用，怎么能放到右边空白区域，最好能中间container容器放大后，放置在其上面？谢谢大神！
回复讨论(解决方案)
你是相对定位的
top: -500px;
<style type="text/css"> .spot{ display:list-item; margin: 5px; width: 30px; height: 30px; border-radius: 60px; } .spot:hover{ background-color: #0080ff; } .header{ background-color: #262626; margin: 20px auto; width: 95%; height: 160px; border-radius: 20px; font-weight: bold; font-size: 25px; color: #2b669a; text-align: center; } .hd_btn_submit,.hd_input{ position: relative; float: right; top:10%; } .show_img{ float:left; background-color: #245269; height: 500px; width: 80%; border-radius: 20px; left: 35px; } </style></head><body> <div class="header"> <p>标题</p> <button class="hd_btn_submit" type="submit">register</button> <label> <input class="hd_input" type="text"> </label> </div> <div class="container_showImg"> <div class="show_img"></div> <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > </div> </body>
你是相对定位的
top: -500px;
谢x谢！relative相对的的元素是相邻的上级元素吗？
<style type="text/css"> .spot{ display:list-item; margin: 5px; width: 30px; height: 30px; border-radius: 60px; } .spot:hover{ background-color: #0080ff; } .header{ background-color: #262626; margin: 20px auto; width: 95%; height: 160px; border-radius: 20px; font-weight: bold; font-size: 25px; color: #2b669a; text-align: center; } .hd_btn_submit,.hd_input{ position: relative; float: right; top:10%; } .show_img{ float:left; background-color: #245269; height: 500px; width: 80%; border-radius: 20px; left: 35px; } </style></head><body> <div class="header"> <p>标题</p> <button class="hd_btn_submit" type="submit">register</button> <label> <input class="hd_input" type="text"> </label> </div> <div class="container_showImg"> <div class="show_img"></div> <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > <img class="spot lazy" src="/static/imghwm/default1.png" data-src="img/spot.png" alt="css效果：怎么把spot的元素放置在网页的右边空白区域_html/css_WEB-ITnose" > </div> </body> 谢谢！
你是相对定位的
top: -500px;
谢x谢！relative相对的的元素是相邻的上级元素吗？
不是，
relative是相对于元素原本的位置进行偏移。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css3 border-image_html/css_WEB-ITnoseNächster Artikel：css background背景拉伸_html/css_WEB-ITnose