Add Overflow:hidden to Body; You can hide all the scroll bars of the page, but you must set a height for the body
overflow:hidden;height:864px;
The parent element must be set position:relative must be set to width and height and cannot be used as a percentage of the parent layer if it is a picture, to use Background:url (bg.jpg) no-repeat; Child elements must be set position:absolute; You must set the width and height positioning using the top left buttom right using the percent child element to easily fly off the instance:
<Divclass= "Warp"> <imgsrc= "First.img"class= "First-img" /> <Divclass= "Sub-warp"> <imgsrc= "Sub-two.img"class="" /> <imgsrc= "Sub-three.img"class="" /> </Div></Div>/** Structure Description * The outermost warp* Sub-warp is absolutely positioned relative to the. First-img, so the sub-warp must be absolutely positioned and its size to be the same as the. First-img Size * Sub-layer. Sub-two/. Sub -three is the absolute positioning relative to the Sub-warp, the value in percent can be, if this is relative positioning, on some phones will be problematic * /
. Warp{position:relative;/*the outermost layer is relative positioning*/}. Warp img{//The normal format of the picture can be}. Sub-warp{position:Absolute;/*all sub-layers are absolutely positioned*/Top:0; Left:0; Right:0;Bottom:0;}. Sub-warp img::nth-child (1){position:Absolute;Top:22%; Left:5%;}. Sub-warp img:nth-child (2){position:Absolute;Top:15%; Left:22%;}
If the child element is scaled and centered within a certain range of the parent element, the left:50% needs a fixed width value and a margin-left value to be positioned with 50%, and top is re-adjusted according to the actual situation:
{ . Sub-warp img:nth-child (2) { position:absolute; Top:15%; Left:50%; width:290px; margin-left:-176px; } }
to solve the problem of bursting the container , Before we can only calculate the width of the div.box, with the container width minus the value of padding and border, but sometimes, we do not know the total width of the element, such as adaptive layout, only know a hundred points, but other values are PX and other values, this is the difficulty, dead stuck. With the advent of CSS3, which uses box-sizing to change the elements of the box model of the actual implementation of the effect, but today we learn the Calc () method is more convenient, you can use Calc () calculation, calc () can be used in large size on the small screen.
use: Know the total width is 100%, on this basis minus the width of the Boder (5px * 2 = 10px), minus the width of the padding (10px * 2 = 20px), that is " 100%-(10px + 5px) * 2 = 30px ", the resulting value is the width value of the div.box. width:90%; /* */ width:-moz-calc (100%-(10px + 5px) * 2) Width:-webkit-calc (100%-(10px + 5px) * 2); width:c ALC (100%-(10px + 5px) * 2);
{ width: 1024px/* for browsers that do not support Calc () */ width: - Moz-calc (100%-40px); width: -webkit-calc (100%-40px); width: calc (100%-40px); margin: auto;}
Welcome to discuss together!
Position of CSS Layout relative/absolute/proportional scaling