position:relative 和position:absolute的问题。

父级用position:relative 子级用position:absolute;那么我在子级用了absolute
在子级的子级用什么呢。还是absolute吗?absolute的子级能否再用relative。
absolute的父级有多个relative是以谁为标准。新手求助。还有一般页面布局都是怎么布局的。我现在弄个嵌套都要定位半天。感谢大佬!!!

2个回答

1.子级的子级可以用absolute或relative 都可以
2.absolute是根据第一个父元素不为static 定位的元素定位的,就是层层递进,直到body
3.布局都是考虑流式布局,响应式,或者栅栏,没有人会全局用定位来解决,会疯掉的,而且问题也有,没法适应各个屏幕大小. 不够灵活.但有些时候也会有奇效

absolute的元素是以父辈元素中离它最近的一个 relative元素 或 absolute元素 或者 fixed元素 来定位的。
如果父辈元素中没有 relative元素 或 absolute元素 或者 fixed元素 则以整个文档来定位。

absolute的子级可以再用relative。relative只是相对这个元素原本的位置进行位置偏移,与它的父辈元素没关系。
absolute的父级有多个relative是以谁为标准。上面说了:离它最近的一个。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
请问各位大佬position: relative和 absolute怎么运用?

请问各位:多个`div`中在css怎么运用 position: absolute; position: relative; 样式?

求助:position: relative的遮挡问题

<br /><img src="/upload/attachment/71159/7c4cac4a-b2e2-34a2-9de1-aa79401a6cc1.bmp" /> <br /> <br />各位大虾们啊~~快帮帮小弟吧~郁闷死了~ <br />position: relative; 这个属性怎么用啊~~ <br />这个table要定位住~~可出来的效果怎么突出来了~长了两个门牙似的~~ <br />请教大家~~如何使它正常显示出来~~ <br />下面是我的代码:拜托了~呜呜呜~ <br />&lt;style&gt; <br />thead tr{ <br />&nbsp;&nbsp;&nbsp; position: relative; <br />&nbsp;&nbsp;&nbsp; top: expression(offsetParent.scrollTop); /*IE5+ only*/ <br />&nbsp;&nbsp;&nbsp; } <br />thead td, thead th { <br />&nbsp;&nbsp;&nbsp; position:relative; <br />&nbsp;&nbsp;&nbsp; background-color: #FFFF80; <br />&nbsp;&nbsp;&nbsp; } <br />&lt;/style&gt; <br /> <br />&lt;table border="1"&gt; <br />&lt;thead&gt; <br /> <br /> &lt;tr&gt; <br /> &lt;td rowspan="3"&gt;no.&lt;/td&gt; <br /> &lt;td rowspan="1"&gt;wbs&lt;/td&gt; <br /> &lt;td rowspan="1" colspan="2"&gt;警告メッセージ&lt;/td&gt; <br /> &lt;/tr&gt; <br /> <br /> &lt;tr&gt; <br /> &lt;td rowspan="1"&gt;開始年月&lt;/td&gt; <br /> &lt;td rowspan="2" &gt;ddddd&lt;/td&gt; <br /> &lt;td rowspan="2" &gt;cccc&lt;/td&gt; <br /> &lt;/tr&gt; <br /> <br /> &lt;tr&gt; <br /> &lt;td rowspan="1"&gt;dffdf&lt;/td&gt; <br /> &lt;/tr&gt;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; &lt;/thead&gt; <br /> <br />&nbsp;&nbsp;&nbsp; &lt;/table&gt;

overflow和position:absolute的问题

![黑色框是爷爷级;蓝色框是父级;红色是子级;](https://img-ask.csdn.net/upload/201606/17/1466151114_87571.png) .list-detail {//爷爷样式 黑框 height:382px; width:324px; background:rgba(255, 255, 255, 1); padding-top:28px; overflow-y: auto; overflow-x: hidden; } .details {//父级样式 蓝框 position:relative; float:right; margin-right:10px; height:36px; line-height:36px; font-size:14px; color:#ebc52f; } .details-box {//子样式 红框 position:absolute; display:none; width:415px; height:300px; height:auto; background:#fff; top:0; left:0; border-radius:6px; padding:20px; z-index:999999; -webkit-box-shadow:0 0 10px rgba(215, 214, 214, .7); -moz-box-shadow:0 0 10px rgba(215, 214, 214, .7); box-shadow:0 0 10px rgba(215, 214, 214, .7); } 怎么能让子元素溢出,不被截

css父级position:absolute;那么子元素的高度如何调整

比如一个div是父级。position:absolute; <input>是它的一个子元素,当我设置它的样式为margin-top: 20px;时,它的高度却没有变化; 求解答。

position的值, relative和absolute分别是相对于谁进行定位的?

https://www.nowcoder.com/ta/front-end-interview/review?page=9 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位。 relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。 上面这两句是什么意思,谁能用白话解释下?

请教CSS中的position:relative;的作用。

对于css中的[color=red]position:relative;[/color]我始终搞不明白它是什么意思,有什么作用? 对于position的其它几个属性,我都搞懂了 [quote] static :  无特殊定位,对象遵循HTML定位规则 absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框 relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 fixed :  IE5.5及NS6尚不支持此属性 [/quote] 对于文档中所说的几个属性,除了relative,其它的一试,就效果出来了,对于个[b]relative[/b],真是难理解。 要说是相对定位嘛,也不是。 对于页面中一个static的div#demo,我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该是用这个position:relative这个吧,然后再加上top,right给限制一下。 我理解得没有错吧? 不过在现实开发中,我却常常 得不到预期的效果。我觉得应该是我对这个属性还没有理解透。现在我想完全掌握这个,就像position:absolute那样地掌握它,想怎么弄html元素就怎么弄HTML元素。 请理解这一点的朋友们给讲讲,或者给点资料,链接之类 的也可以。 谢谢您们。 [b]问题补充:[/b] 谢谢您 提供的链接,不过它没有深度,我希望得到position:relative的详细的理解。 [b]问题补充:[/b] reeze,你说的这一点很好。 不过,对于声明了这属性的本身的元素的定位呢?它自身的top,left,right,bottom有什么作用? 你所讲的是relative的子元素的行为啊。我想知道它自身的一些信息。 [b]问题补充:[/b] 就没有大大给点根本的解释吗?

背景图片background-position:center,之后,浏览器缩放,内容错位???

请问:: 背景图片设置了background-position之后,其他的内容区在浏览器缩放的时候就移位了,如下图, 要怎么设置它们才能跟随背景图片一致?? 内容用的绝对定位,写死不行,百分比也不对,要怎么写呢,求指点,谢谢 外部div .wrapper-ydy{ width: 100%; text-align: center; background-image: url("../images/yd/yd-bg.png"); background-repeat: no-repeat; background-position: center; height: 679px; position: relative; z-index: -99999; } 头部,进入主页内容 .ydy-top{ z-index: 1000; background-color: #fffa62; width: 200px; position: absolute; top: 8%; left: 55%; }![图片](https://img-ask.csdn.net/upload/201701/17/1484606246_697598.jpg)

css 中使用太多的position会有不好的影响吗?

在网页定位中,有时候回用margin和padding定位,但是好像没有position:absolute和position:relative;好用。但是之前有看到说是position用的太多会对网页有不好的影响,想问是这样吗?为什么会有不好的影响呢?

同时使用min-width和position:fixed带来的问题

我发现一个div同时使用min-width:1200px和position:fixed后会显示只有1200px,如何处理这个问题

css 两个相邻的reltive 下absolute受影响的问题

如题 ``` <div style="position:relative"> <span style="position:absolute;bottom:10%;">图片1111上的文字</span> <img style="width:100%"/> </div> <div style="position:relative"> <span style="position:absolute;bottom:10%;">图片2222上的文字</span> <img style="width:100%"/> </div> ``` 在上诉的代码实现中,第一个relative下的“图片1111上的文字”这段文字会直接收到第二个relative的影响,被覆盖到了“图片2222上的文字”这段文字下面,求解啊啊啊啊

zoom属性只有当对象的position属性为absolute,或者relative;怎么解决

zoom属性只有当对象的position属性为absolute,或者relative;怎么解决

小程序开发中,块内容使用position绝对定位之后 不显示

![图片说明](https://img-ask.csdn.net/upload/201709/03/1504422274_299979.png) 上图显示的那块内容,没有使用绝对定位时正常显示在页面最后面,使用了绝对定位后,开发工具上正常显示,但在真机上使用了绝对定位的这块内容没有显示,不知道是什么原因。

absolute定位元素的包含块问题

当absolute定位元素的祖辈元素都不是relative/absolute/fixed定位时,一直以为absolute元素是相对于视口定位的,跟fixed定位一样。但是实际情况是,absolute元素会随着文档的滚动而滚动,并不是在视口中固定不动的。那这种情况下absolute定位元素是相对于谁来定位的呢? 下面代码的效果怎么解释?(先向下滚动页面,然后点击页面使absolute元素定位。如果是相对于文档,那absolute元素应该是在文档的右下角。但实际上却不是) ``` <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> html { border-right:2px solid #f00; width:200px; } body { border-right:2px dotted #0f0; width:100px; } div{ height:600px; } p.abPos{ position:absolute; right:0px; bottom:0px; margin:0; width:100px; height:100px; border:1px solid #00f; } </style> </head> <body> html宽度设为200px,右边框为红色;body宽度为100px,右边框为绿色;目标元素p(蓝色边框),绝对定位,包含块为视口,精确说包含块为窗口未滚动时的视口。 <div> <p width="300px" height="300px" id='target'></p> </div> <script> window.addEventListener('scroll',function(){ if(document.body.scrollTop>20){ document.getElementById('target').className='abPos'; } }); </script> </body> </html> ```

盒子垂直居中,垂直居中是div元素,宽度高度被里面的子元素撑开的?

``` <div style="width:600px;heigth:600px"><!--这个是父元素--> <div class="son"><!--这个是子元素--> <h1 class="title">hello word</h1> <div class="content">这里面是一堆元素</div> </div> </div> ``` 知道父元素的宽度和height,直接通过css写的width和height, 子元素没有通过style设置width和height,而是通过子元素中内部的元素将其撑开来计算的。 如何让这个子元素居中? 测试过的失败的方法 margin-top:50%; margin-top:-50%; margin-top的百分数是根据父元素的width计算的。 父元素 position:relative; 子元素position:absolute;top:0;right:0;bottom:0;left:0 失败,子元素如果不设置width和height就会直接继承到父元素的width和height,而不是通过内容撑开的宽度和高度。 父元素position:relative;子元素position:absolute:top:50%; 子元素里面加一层div设置position:absolute;top:-50%;top百分比里是根据父元素设定,子元素absolute,父元素继承不到高度。 父元素position:relative;子元素position:absolute:top:50%; 子元素里面加一层div设置position:relative;top:-50%; 这个最接近正确的答案,但是还是是错误的,在chrome的盒子模型里面已经显示出了relative的偏移量,但是渲染的时候并没有被渲染出来,top-50%;无效果。

网页中打印html为什么position属性不起作用?

![图片说明](https://img-ask.csdn.net/upload/201708/11/1502418240_77997.png) ![图片说明](https://img-ask.csdn.net/upload/201708/11/1502418221_266343.png) 请问这是怎么回事,有没有解决办法?

HTML / CSS / PHP / JavaScript | 下拉内容未显示在所选下拉按钮附近

<div class="post-text" itemprop="text"> <p>A little bit of backstory and info about my knowledge of code:</p> <p>I have been learning code for 2-3 years and I am currently working on a Web application with a classmate, and we are nearly done. I mainly did the HTML/CSS part and he mainly did the PHP/JavaScript part, so my knowledge is mostly HTML and CSS.</p> <p>My problem:</p> <p>My classmate has coded a system where certain 'badges' are in certain levels, and you can drag them around into different levels. These badges are retrieved from a database, and then made using some form of a loop that runs for every badge in the database. This happens with some HTML code in PHP. This part works fine.</p> <p><a href="https://i.stack.imgur.com/JryP2.png" rel="nofollow noreferrer">Image of badges and levels here</a></p> <p>Now comes my problem: I'm trying to create some form of a dropdown menu within each individual 'badge', but while the dropdown buttons appear in every 'badge', the dropdown content only appears near the first button. I don't know if it is the same content that is triggered by every button, or if it is different content that is appearing in the same spot for some reason. If someone could tell me what is exactly going wrong and how to fix it, that would be greatly appreciated. (we have to have our project finished on 5 or 6 febuary 2019).</p> <p><a href="https://i.stack.imgur.com/ES8Oq.png" rel="nofollow noreferrer">First dropdown button clicked</a></p> <p><a href="https://i.stack.imgur.com/5NTdn.png" rel="nofollow noreferrer">Fourth dropdown button clicked</a></p> <p>As you can see, it appears in the same spot yet different buttons are clicked.</p> <p>Code used:</p> <p>Main code consisting of HTML, PHP and JavaScript:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;title&gt;Badges&lt;/title&gt; &lt;link rel="stylesheet" href="main.css" /&gt; &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt; &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt; &lt;script src="BadgePage.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body style="margin:0"&gt; &lt;div id="container"&gt; &lt;div id="home"&gt; &lt;a href="workinprogress.html"&gt; &lt;button class="home-button"&gt; &lt;img src="img/MCC.png" width="200" height="60"&gt; &lt;/button&gt; &lt;/a&gt; &lt;/div&gt; &lt;div id="BP-link" class="nav"&gt; &lt;a href="Testing2.php"&gt;&lt;button class="bpbutton"&gt;Badges&lt;/button&gt;&lt;/a&gt; &lt;/div&gt; &lt;div id="lln_page" class="nav"&gt; &lt;a href="LeerlingenPage.php"&gt;&lt;button class="llnpbutton"&gt;Leerlingen&lt;/button&gt;&lt;/a&gt; &lt;/div&gt; &lt;div id="main"&gt; &lt;div class="main"&gt; &lt;?php $link = mysqli_connect("localhost", "root", "", "badgedb"); $lev = 1; $levAantal = 3; for($lev;$lev&lt;=$levAantal;$lev++){ echo '&lt;div id="level' . $lev . '" class="levelID"&gt;'; echo '&lt;p class="level"&gt;Level ' . $lev . '&lt;/p&gt;'; echo '&lt;ul class="itemList Level-' . $lev . ' ui-sortable" id="L' . $lev . '"&gt;'; if($link === false){ die("ERROR: Could not connect. " . mysqli_connect_error()); } $sql = "SELECT * FROM badges"; if($result = mysqli_query($link, $sql)){ if(mysqli_num_rows($result) &gt; 0){ } else{ echo "No records matching your query were found."; } } else{ echo "ERROR: Could not able to execute $sql. " . mysqli_error($link); } while($row = mysqli_fetch_array($result)){ if($row['level'] == $lev){ echo " &lt;li class='item'&gt; &lt;link rel='stylesheet' href='side.css' /&gt; &lt;script type='text/javascript'&gt; /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById('myDropdown').classList.toggle('show'); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName('dropdown-content'); var i; for (i = 0; i &lt; dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } &lt;/script&gt; &lt;img src='img/" . $row['afbeelding'] . "' alt='Item Number " . $row['ID'] . "' class='itemImage' id='" . $row['ID'] . "'&gt; &lt;div class='dropdown'&gt; &lt;button onclick='myFunction()' class='dropbtn'&gt;Dropdown&lt;/button&gt; &lt;div id='myDropdown' class='dropdown-content'&gt; &lt;button href='#'&gt;Link 1&lt;/button&gt; &lt;button href='#'&gt;Link 2&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt;"; } } echo "&lt;/ul&gt;"; echo "&lt;/div&gt;"; } ?&gt; &lt;script type="text/javascript"&gt; function onSubmit(){ var badgeID; var Alpha = 1; const search = $('.main &gt; div.levelID &gt; ul &gt; li &gt; img'); const badges = {}; const hrefDir = location.href.replace(/(^.*\/).*?$/, '$1'); // http://localhost/PWS/Testing2.php -&gt; http://localhost/PWS/ for (const badge of search) { const levelID = parseInt(badge.parentElement.parentElement.id.replace('L', '')); if (badge.id){ badgeID = parseInt(badge.id); } else { badgeID = 0; } const badgeImg = badge.src.replace(hrefDir + 'img/', ''); badges[Alpha] = { level: levelID, afbeelding: badgeImg, ID: badgeID } Alpha++; } $.ajax('api/update-order.php', { data: badges });/*.done((data)=&gt;{ console.log(data) }); console.log(badges);/**/ alert("Data uploaded!"); } &lt;/script&gt; &lt;input type="button" onclick="onSubmit()" value="submitter"&gt; &lt;!-- &lt;div class="optionsButton"&gt; &lt;div class="dropdown"&gt; &lt;button class="dropbtn"&gt;&lt;img src="img/cogwheel.png" alt="opties" class="options"&gt;&lt;/button&gt; &lt;div class="dropdown-content"&gt; &lt;p&gt;YEET&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>Main CSS document:</p> <pre><code>* { box-sizing: border-box; } #myInput { background-color: white; width: 40%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; margin-left: 30%; } #myTable { border-collapse: collapse; width: 80%; border: 1px solid #ddd; font-size: 18px; margin: 0 auto; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } body { margin: 0; } } .dropbtn { background-color: darkgray; border-left: solid; border-top: solid; border-top-left-radius: 10px; max-height: 10%; max-width: 5%; height: 100px; width: 100px; position: fixed; bottom: 0px; right: 0px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; right: 100%; top: 0%; background-color: darkgray; width: auto; } .main { height: 100%; } .options { height: 100%; width: 100%; } p.level { width: inherit; text-align: center; background-color: gray; color: white; padding: 5px; margin-top: 0; font-size: 20px; border-radius: 10px; border: solid darkgray; } ul.itemList { height: auto; min-height: 50px; } .ui-sortable-handle { width: auto; } li.item { display: inline-block; border: 1px black double; background-color: lightgrey; padding: auto; padding-left: 1%; padding-right: 1%; margin-left: 0px; } img.itemImage { height: 150px; width: 150px; } button.bpbutton { height: 100%; width: 100%; color: white; background-color: #F44336; border: solid; border-color: #F44336; } button.bpbutton:hover { background-color: #cc1c0e; color: lightgray; } button.llnpbutton { height: 100%; width: 100%; color: white; background-color: #F44336; border: solid; border-color: #F44336; } button.llnpbutton:hover { background-color: #cc1c0e; color: lightgray; } button.home-button { height: 100%; width: 100%; color: white; background-color: #F44336; border: solid; border-color: #F44336; } #container { display: grid; grid-template-columns: 0fr 1fr 1fr; grid-template-rows: 1fr 14fr; grid-template-areas:"home BP-link lln_page" "main" } #home { background-color: #F44336; padding-left: 10px; border-right: dashed #f22615; border-bottom: solid #f22615; color: white; padding-top: 1%; } #zoek { background-color: #F44336; border-right: dashed; border-color: #f22615; color: white; text-align: center; border-bottom: solid #f22615; } #BP-link { background-color: #F44336; color: white; text-align: center; border-bottom: solid #f22615; border-right: dashed #f22615; } #lln_page { background-color: #F44336; color: white; text-align: center; border-bottom: solid #f22615; } #main { background-color: lightgray; width: 100%; grid-column: 1 / end; } #workinprogress { background-image: url(https://www.scansys.eu/scansysfld/uploads/2017/06/Work_In_Progress.png); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: lightgray; width: 100%; grid-column: 1 / end; } th, td, table { border: 1px black solid; border-collapse: collapse; } textarea.comment { resize:none; height:50px; width:90%; } .buttonForSubmit { text-align: center; } #submitButton { height:50px; width:60px; } </code></pre> <p>CSS document specifically for the dropdown components:</p> <pre><code>.dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #304870; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content button { color: black; padding: 12px 16px; text-decoration: none; display: block; width: 100%; } .dropdown-content button:hover {background-color: #ddd} .show {display:block;} </code></pre> <p><a href="https://i.stack.imgur.com/zdzEI.png" rel="nofollow noreferrer">Image of Database, should you need it.</a></p> <p>Thank you for reading, and I hope you or someone else can help us. Please tell me if you need anything else.</p> </div>

absolute和relative里面的字元素是怎么定位的?

怎么感觉楼下都是水贴...... ---------------------------------------------------------- 我知道absolute脱离文档流,相对父级非static定位,relative原来的占位不变,元素实际位置脱离文档流,相对自己定位 但是好像很少有人谈到它们的子元素怎么定位。 我做了下实验,好像子元素跟着父元素在跑,也是脱离文档流了的,不知道我总结的对不对, 子元素和父元素在定位上有什么关系吗?父元素脱离文档流,子元素也脱离?况且很多人认为relative不脱离 ``` div class="div1"><p>111111</p></div> <div class="div2"><p>22222</p></div> <div class="div3"><p>33333</p></div> .div2{ background-color: yellow; opacity: 0.5; position: absolute/relative; transform: translate(50px,50px); } ``` absolute: ![图片说明](https://img-ask.csdn.net/upload/201805/30/1527689028_31284.png) relative: ![图片说明](https://img-ask.csdn.net/upload/201805/30/1527689040_839814.png)

菜鸟学习CSS定位position属性值absolute问题,不懂具体是相对于那里移动

``` <!DOCTYPE html> <html> <head> <style> body{background-color:white} .box{ background-color:gray; width:100px; height:100px; color:black; } #static{ position:static; } #relative{ position:relative; background-color:yellow; top:20px; left:10px; z-index:1; } #absolute{ position:absolute; background-color:blue; top:40px; left:40px; } #fixed{ position:fixed; background-color:red; top:0; left:120px; z-index:-1; } </style> </head> <body> <div class="box" id="static">static</div> <!-- 相对于文档中的原始位置移动,这个懂 --> <div class="box" id="relative">relative</div> <!-- 效果看来是相对于原始框body定位,不知道为什么不相对于relative移动,relative不是最近的父元素,还有原始body框也没有规定position的值啊 搞不懂这几个属性值的计算方法 --> <div class="box" id="absolute">absolute</div> <div class="box" id="fixed">fixed</div> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201711/21/1511234718_170909.jpg)

背景图片,图片,跑到别的div,页面最下面有空白

body{ padding: 0; margin:0; overflow-x:hidden; } .name{ position: absolute; right: 60px; font-size:50px; } .nav li a:link{ color: black; text-decoration: none; } .nav li{ display: inline; color: black; position: relative; left: 350px; font-size: 22px; } #a2{ height: 100px; background-image: url(images/1.jpg); } #a2 h2{ color: white; font-size: 60px; margin: 0 auto; position: relative; left: 500px; line-height: 100px; font-family: "微软雅黑"; } #a3 h3{ position: relative; left: 500px; font-family: "agency fb"; font-size: 50px; } #a41{ font-size: 20px; float: left; } #a41 img{ width: 445px; height: 200px; } #a41 p{ width:445px; font-size: 15px; text-align: center; } #a5{ height: 400px; background-image:url(images/1.jpg); } #a51 { font-size: 20px; display: inline; width: 455px; color: black; } #a6{ position: relative; top: 60px; left: 260px; } #a61{ float: left; } #a61 img{ width: 200px; height: 330px; } #a61 p{ color: black; font-size: 15px; text-align: center; } .box{ height: ; position: relative ; top: 60px; background-color:gray; clear: both; color: white; height: 300px; } span{ position: relative; left: 200px; top: 100px; font-size: 40px; } .small{ font-size: 20px; } .box li{ line-height:30px ; } .box ul{ list-style-type: none; position: relative; left: 500px; } .box a:link{ color: white; font-size: 15px; text-decoration: none; } section{ position:relative; left: 120px; bottom: 115px; } .box p:first-child{ font-size: 30px; } .box p{ position: relative; left: 960px; bottom: 280px; } .one{ font-size:14px; background-color: black; color: white; } input{ position: relative; left: 960px; bottom: 280px; } ul{ padding: 0; ![图片说明](https://img-ask.csdn.net/upload/201710/27/1509072579_163422.png)![![![![![图片说明](https://img-ask.csdn.net/upload/201710/27/1509072669_550296.png)图片说明](https://img-ask.csdn.net/upload/201710/27/1509072656_698275.png)图片说明](https://img-ask.csdn.net/upload/201710/27/1509072639_408512.png)图片说明](https://img-ask.csdn.net/upload/201710/27/1509072619_806431.png)图片说明](https://img-ask.csdn.net/upload/201710/27/1509072540_675283.png)

4小时玩转微信小程序——基础入门与微信支付实战

这是一个门针对零基础学员学习微信小程序开发的视频教学课程。课程采用腾讯官方文档作为教程的唯一技术资料来源。杜绝网络上质量良莠不齐的资料给学员学习带来的障碍。 视频课程按照开发工具的下载、安装、使用、程序结构、视图层、逻辑层、微信小程序等几个部分组织课程,详细讲解整个小程序的开发过程

Python可以这样学(第四季:数据分析与科学计算可视化)

董付国老师系列教材《Python程序设计(第2版)》(ISBN:9787302436515)、《Python可以这样学》(ISBN:9787302456469)配套视频,在教材基础上又增加了大量内容,通过实例讲解numpy、scipy、pandas、statistics、matplotlib等标准库和扩展库用法。

组成原理课程设计(实现机器数的真值还原等功能)

实现机器数的真值还原(定点小数)、定点小数的单符号位补码加减运算、定点小数的补码乘法运算和浮点数的加减运算。

javaWeb图书馆管理系统源码mysql版本

系统介绍 图书馆管理系统主要的目的是实现图书馆的信息化管理。图书馆的主要业务就是新书的借阅和归还,因此系统最核心的功能便是实现图书的借阅和归还。此外,还需要提供图书的信息查询、读者图书借阅情况的查询等

土豆浏览器

土豆浏览器可以用来看各种搞笑、电影、电视剧视频

Java面试题大全(2020版)

发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environ...

Java8零基础入门视频教程

这门课程基于主流的java8平台,由浅入深的详细讲解了java SE的开发技术,可以使java方向的入门学员,快速扎实的掌握java开发技术!

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

TTP229触摸代码以及触摸返回值处理

自己总结的ttp229触摸代码,触摸代码以及触摸按键处理

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

本课程适合CCNA或HCNA网络小白同志,高手请绕道,可以直接学习进价课程。通过本预科课程的学习,为学习网络工程师、思科CCNA、华为HCNA这些认证打下坚实的基础! 重要!思科认证2020年2月24日起,已启用新版认证和考试,包括题库都会更新,由于疫情原因,请关注官网和本地考点信息。题库网络上很容易下载到。

深度学习原理+项目实战+算法详解+主流框架(套餐)

深度学习系列课程从深度学习基础知识点开始讲解一步步进入神经网络的世界再到卷积和递归神经网络,详解各大经典网络架构。实战部分选择当下最火爆深度学习框架PyTorch与Tensorflow/Keras,全程实战演示框架核心使用与建模方法。项目实战部分选择计算机视觉与自然语言处理领域经典项目,从零开始详解算法原理,debug模式逐行代码解读。适合准备就业和转行的同学们加入学习! 建议按照下列课程顺序来进行学习 (1)掌握深度学习必备经典网络架构 (2)深度框架实战方法 (3)计算机视觉与自然语言处理项目实战。(按照课程排列顺序即可)

java jdk 8 帮助文档 中文 文档 chm 谷歌翻译

JDK1.8 API 中文谷歌翻译版 java帮助文档 JDK API java 帮助文档 谷歌翻译 JDK1.8 API 中文 谷歌翻译版 java帮助文档 Java最新帮助文档 本帮助文档是使用谷

Ubuntu18.04安装教程

Ubuntu18.04.1安装一、准备工作1.下载Ubuntu18.04.1 LTS2.制作U盘启动盘3.准备 Ubuntu18.04.1 的硬盘空间二、安装Ubuntu18.04.1三、安装后的一些工作1.安装输入法2.更换软件源四、双系统如何卸载Ubuntu18.04.1新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列...

快速排序---(面试碰到过好几次)

原理:    快速排序,说白了就是给基准数据找其正确索引位置的过程.    如下图所示,假设最开始的基准数据为数组第一个元素23,则首先用一个临时变量去存储基准数据,即tmp=23;然后分别从数组的两端扫描数组,设两个指示标志:low指向起始位置,high指向末尾.    首先从后半部分开始,如果扫描到的值大于基准数据就让high减1,如果发现有元素比该基准数据的值小(如上图中18&amp;lt...

手把手实现Java图书管理系统(附源码)

【超实用课程内容】 本课程演示的是一套基于Java的SSM框架实现的图书管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的java人群。详细介绍了图书管理系统的实现,包括:环境搭建、系统业务、技术实现、项目运行、功能演示、系统扩展等,以通俗易懂的方式,手把手的带你从零开始运行本套图书管理系统,该项目附带全部源码可作为毕设使用。 【课程如何观看?】 PC端:https://edu.csdn.net/course/detail/27513 移动端:CSDN 学院APP(注意不是CSDN APP哦) 本课程为录播课,课程2年有效观看时长,大家可以抓紧时间学习后一起讨论哦~ 【学员专享增值服务】 源码开放 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 下载方式:电脑登录https://edu.csdn.net/course/detail/27513,点击右下方课程资料、代码、课件等打包下载

HTML期末大作业

这是我自己做的HTML期末大作业,花了很多时间,稍加修改就可以作为自己的作业了,而且也可以作为学习参考

Python数据挖掘简易入门

&nbsp; &nbsp; &nbsp; &nbsp; 本课程为Python数据挖掘方向的入门课程,课程主要以真实数据为基础,详细介绍数据挖掘入门的流程和使用Python实现pandas与numpy在数据挖掘方向的运用,并深入学习如何运用scikit-learn调用常用的数据挖掘算法解决数据挖掘问题,为进一步深入学习数据挖掘打下扎实的基础。

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

想学好JAVA必须要报两万的培训班吗? Java大神勿入 如果你: 零基础想学JAVA却不知道从何入手 看了一堆书和视频却还是连JAVA的环境都搭建不起来 囊中羞涩面对两万起的JAVA培训班不忍直视 在职没有每天大块的时间专门学习JAVA 那么恭喜你找到组织了,在这里有: 1. 一群志同道合立志学好JAVA的同学一起学习讨论JAVA 2. 灵活机动的学习时间完成特定学习任务+每日编程实战练习 3. 热心助人的助教和讲师及时帮你解决问题,不按时完成作业小心助教老师的家访哦 上一张图看看前辈的感悟: &nbsp; &nbsp; 大家一定迫不及待想知道什么是极简JAVA学习营了吧,下面就来给大家说道说道: 什么是极简JAVA学习营? 1. 针对Java小白或者初级Java学习者; 2. 利用9天时间,每天1个小时时间; 3.通过 每日作业 / 组队PK / 助教答疑 / 实战编程 / 项目答辩 / 社群讨论 / 趣味知识抢答等方式让学员爱上学习编程 , 最终实现能独立开发一个基于控制台的‘库存管理系统’ 的学习模式 极简JAVA学习营是怎么学习的? &nbsp; 如何报名? 只要购买了极简JAVA一:JAVA入门就算报名成功! &nbsp;本期为第四期极简JAVA学习营,我们来看看往期学员的学习状态: 作业看这里~ &nbsp; 助教的作业报告是不是很专业 不交作业打屁屁 助教答疑是不是很用心 &nbsp; 有奖抢答大家玩的很嗨啊 &nbsp; &nbsp; 项目答辩终于开始啦 &nbsp; 优秀者的获奖感言 &nbsp; 这是答辩项目的效果 &nbsp; &nbsp; 这么细致的服务,这么好的氛围,这样的学习效果,需要多少钱呢? 不要1999,不要199,不要99,只要9.9 是的你没听错,只要9.9以上所有就都属于你了 如果你: 1、&nbsp;想学JAVA没有基础 2、&nbsp;想学JAVA没有整块的时间 3、&nbsp;想学JAVA没有足够的预算 还等什么?赶紧报名吧,抓紧抢位,本期只招300人,错过只有等时间待定的下一期了 &nbsp; 报名请加小助手微信:eduxy-1 &nbsp; &nbsp;

C++语言基础视频教程

C++语言基础视频培训课程:本课与主讲者在大学开出的程序设计课程直接对接,准确把握知识点,注重教学视频与实践体系的结合,帮助初学者有效学习。本教程详细介绍C++语言中的封装、数据隐藏、继承、多态的实现等入门知识;主要包括类的声明、对象定义、构造函数和析构函数、运算符重载、继承和派生、多态性实现等。 课程需要有C语言程序设计的基础(可以利用本人开出的《C语言与程序设计》系列课学习)。学习者能够通过实践的方式,学会利用C++语言解决问题,具备进一步学习利用C++开发应用程序的基础。

UnityLicence

UnityLicence

软件测试2小时入门

本课程内容系统、全面、简洁、通俗易懂,通过2个多小时的介绍,让大家对软件测试有个系统的理解和认识,具备基本的软件测试理论基础。 主要内容分为5个部分: 1 软件测试概述,了解测试是什么、测试的对象、原则、流程、方法、模型;&nbsp; 2.常用的黑盒测试用例设计方法及示例演示;&nbsp; 3 常用白盒测试用例设计方法及示例演示;&nbsp; 4.自动化测试优缺点、使用范围及示例‘;&nbsp; 5.测试经验谈。

YOLOv3目标检测实战:训练自己的数据集

YOLOv3是一种基于深度学习的端到端实时目标检测方法,以速度快见长。本课程将手把手地教大家使用labelImg标注和使用YOLOv3训练自己的数据集。课程分为三个小项目:足球目标检测(单目标检测)、梅西目标检测(单目标检测)、足球和梅西同时目标检测(两目标检测)。 本课程的YOLOv3使用Darknet,在Ubuntu系统上做项目演示。包括:安装Darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 Darknet是使用C语言实现的轻型开源深度学习框架,依赖少,可移植性好,值得深入探究。 除本课程《YOLOv3目标检测实战:训练自己的数据集》外,本人推出了有关YOLOv3目标检测的系列课程,请持续关注该系列的其它课程视频,包括: 《YOLOv3目标检测实战:交通标志识别》 《YOLOv3目标检测:原理与源码解析》 《YOLOv3目标检测:网络模型改进方法》 敬请关注并选择学习!

Python数据分析师-实战系列

系列课程主要包括Python数据分析必备工具包,数据分析案例实战,核心算法实战与企业级数据分析与建模解决方案实战,建议大家按照系列课程阶段顺序进行学习。所有数据集均为企业收集的真实数据集,整体风格以实战为导向,通俗讲解Python数据分析核心技巧与实战解决方案。

YOLOv3目标检测实战系列课程

《YOLOv3目标检测实战系列课程》旨在帮助大家掌握YOLOv3目标检测的训练、原理、源码与网络模型改进方法。 本课程的YOLOv3使用原作darknet(c语言编写),在Ubuntu系统上做项目演示。 本系列课程包括三门课: (1)《YOLOv3目标检测实战:训练自己的数据集》 包括:安装darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 (2)《YOLOv3目标检测:原理与源码解析》讲解YOLOv1、YOLOv2、YOLOv3的原理、程序流程并解析各层的源码。 (3)《YOLOv3目标检测:网络模型改进方法》讲解YOLOv3的改进方法,包括改进1:不显示指定类别目标的方法 (增加功能) ;改进2:合并BN层到卷积层 (加快推理速度) ; 改进3:使用GIoU指标和损失函数 (提高检测精度) ;改进4:tiny YOLOv3 (简化网络模型)并介绍 AlexeyAB/darknet项目。

超详细MySQL安装及基本使用教程

一、下载MySQL 首先,去数据库的官网http://www.mysql.com下载MySQL。 点击进入后的首页如下:  然后点击downloads,community,选择MySQL Community Server。如下图:  滑到下面,找到Recommended Download,然后点击go to download page。如下图:  点击download进入下载页面选择No...

一学即懂的计算机视觉(第一季)

图像处理和计算机视觉的课程大家已经看过很多,但总有“听不透”,“用不了”的感觉。课程致力于创建人人都能听的懂的计算机视觉,通过生动、细腻的讲解配合实战演练,让学生真正学懂、用会。 【超实用课程内容】 课程内容分为三篇,包括视觉系统构成,图像处理基础,特征提取与描述,运动跟踪,位姿估计,三维重构等内容。课程理论与实战结合,注重教学内容的可视化和工程实践,为人工智能视觉研发及算法工程师等相关高薪职位就业打下坚实基础。 【课程如何观看?】 PC端:https://edu.csdn.net/course/detail/26281 移动端:CSDN 学院APP(注意不是CSDN APP哦) 本课程为录播课,课程2年有效观看时长,但是大家可以抓紧时间学习后一起讨论哦~ 【学员专享增值服务】 源码开放 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 下载方式:电脑登录https://edu.csdn.net/course/detail/26281,点击右下方课程资料、代码、课件等打包下载

董付国老师Python全栈学习优惠套餐

购买套餐的朋友可以关注微信公众号“Python小屋”,上传付款截图,然后领取董老师任意图书1本。

爬取妹子图片(简单入门)

安装第三方请求库 requests 被网站禁止了访问 原因是我们是Python过来的 重新给一段 可能还是存在用不了,使用网页的 编写代码 上面注意看匹配内容 User-Agent:请求对象 AppleWebKit:请求内核 Chrome浏览器 //请求网页 import requests import re //正则表达式 就是去不规则的网页里面提取有规律的信息 headers = { 'User-Agent':'存放浏览器里面的' } response = requests.get

web网页制作期末大作业

分享思维,改变世界. web网页制作,期末大作业. 所用技术:html css javascript 分享所学所得

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

相关热词 c# 按行txt c#怎么扫条形码 c#打包html c# 实现刷新数据 c# 两个自定义控件重叠 c#浮点类型计算 c#.net 中文乱码 c# 时间排序 c# 必备书籍 c#异步网络通信
立即提问