Positioning > 그누보드가이드

본문 바로가기
사이트 내 전체검색

그누보드가이드

css Positioning

페이지 정보

작성자 관리자 댓글 0건 조회 525회 작성일 18-04-01 03:49

본문

# position property: 요소에 사용되는 positioning method 의 타입에 관해서 정한다.(specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky)


* 예:

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

    position: absolute;

    left: 100px;

    top: 150px;

    color: red;

}

</style>

</head>

<body>

<h1>The position Property</h1>


<h2>This is a heading with an absolute position</h2>


<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>


</body>

</html>

 

position.png


 

* 그누보드 사용예: shop/mobile/category.php

<div id="category" class="menu">

<!--닫기버튼-->

    <button type="button" class="menu_close"><i class="fa fa-times" aria-hidden="true"></i><span class="sound_only">카테고리닫기</span>

</button>


- CSS code

.menu .menu_close {position:absolute;top:0;left:260px;width:40px;height:40px;background:#000;color:#fff;font-size:20px;border:0;z-index:199999}

 

position2.png


추천0
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

회원로그인

설문조사

그누보드5로 홈페이지제작이 좋다

접속자집계

오늘
106
어제
104
최대
257
전체
23,201

현재시간


그누보드5
Copyright © 소유하신 도메인. All rights reserved.