Home > Developer > Web Develop
Positioning:
Position:absolute; Absolute positioning: Set this property out of the document flow without a floating effect, and the block below is coincident with the above. By default, an absolutely positioned block is set, and its top, left is relative to the browser. When an element's parent element is set to an absolute position, the element is positioned (absolute, relative, fixed), and the element's top and left are relative to the parent element.
position:relative; Relative positioning: Setting this property does not break out of the document flow, has a floating effect, sets a block of relative elements, regardless of whether its parent element has a positioning, its top,lef is always relative to its parent element.
The Top,left property is only available for blocks that have been set for positioning.
div default position:static; exists in the document flow and floats with effect.
position:fixed; Fixed positioning: Out of document flow, no scroll bar appears.
CSS technology for layout: floating, box model, positioning.
Z-index:2; The hierarchical display of large values is displayed at the top.
Overflow:hidden out-of-section hidden
Show scroll bar when Auto is out of time
Scroll show scroll bar no matter what is exceeded
=============================================================================================================== =======================
layout instance;
Html:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<link href= "Css/demo.css" rel= "stylesheet"/>
<body>
<div id= "DQQ" >
<div id= "Dtitle" >
</div>
<div id= "Dtop" >
<div id= "Dpic" ><a href= "javascript:;" ></a></div>
<div id= "DWORD" ><a href= "javascript:;" >8 million to buy high-quality July hot-selling autonomous small SUV recommendation </a></div>
</div>
<div id= "Dlist" >
<ul>
<li><a href= "javascript:;" > Chengdu Auto Show SUV new car highlights multi-crowd Thai T300 sale 5.68-91,800 </a></li>
<li><a href= "javascript:;" > Chengdu Auto Show SUV new car highlights multi-crowd Thai T300 sale 5.68-91,800 </a></li>
<li><a href= "javascript:;" > Chengdu Auto Show SUV new car highlights multi-crowd Thai T300 sale 5.68-91,800 </a></li>
<li><a href= "javascript:;" > Chengdu Auto Show SUV new car highlights multi-crowd Thai T300 sale 5.68-91,800 </a></li>
<li><a href= "javascript:;" > Chengdu Auto Show SUV new car highlights multi-crowd Thai T300 sale 5.68-91,800 </a></li>
<li><a href= "javascript:;" > Chengdu Auto Show SUV new car highlights multi-crowd Thai T300 sale 5.68-91,800 </a></li>
</ul>
</div>
</div>
</body>
Css:
*{
padding:0px;
margin:0px;
Font-family: "Bold";
List-style-type:none;
}
a{
Text-decoration:none;
}
#dqq {
width:350px;
height:312px;
Border:solid 1px #D2E1F1;
}
#dtitle {
height:32px;
line-height:32px;
Background-color: #F6FAFD;
padding-left:10px;
}
#dtitle h2{
font-size:16px;
width:100%;
Color: #0873C0;
}
#dtitle a{
font-size:16px;
Color: #0873C0;
}
#dtitle a:hover{
Text-decoration:underline;
}
#dtop {
height:76px;
width:100%;
margin:10px 0px;
}
#dpic, #dword {
Float:left;
}
#dpic {
margin:0px 10px;
}
#dword {
width:180px;
margin-top:18px;
line-height:25px;
}
#dword a{
font-weight:100;
Color: #3B639F;
}
#dword a:hover{
Text-decoration:underline;
}
#dlist {
margin-left:10px;
}
#dlist li{
line-height:26px;
padding-left:5px;
}
#dlist Li a{
font-size:14px;
Color: #172C45;
}
#dlist Li a:hover{
Color: #F00;
}
Original:
Example diagram:
CSS Learning Note Three
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
