2011/03/24 CSS의 display: inline;absolute;시효가 없는 예

이것은 이전에 쓴 회사 내부 블로그 보도다.
※ 당시 브라우저는palceholder 속성을 지원하지 않습니다.
감사합니다ω・q)
입력란에 간단한 설명이 적힌 사이트가 있죠.
입력하기 시작하면 숨기는 거야.
워터프린트라는 게 있어요.

현재 제작 중인 웹 사이트jquery.updnWatermark.js에 플러그인 사용
외관을 조정했지만 예상치 못한 표현이 있을 것 같다.
jQuery로 이런 코드 만들기<input>에 얇게 표시된 것
HTML

<span>　　　　　　　　　　　　　　　　　　
    <label>メールアドレス</label>
</span>

이것show()을 만들 때 장소가 틀렸어요.
결론적으로 CSSdisplay 및 absolute 경쟁사 사양에 따라 다름
하지만 오래전에 읽었기 때문에 행동을 잊은 것 같다(´д｀.)
그래서 필기를 다시 읽어야 한다.
CSS에서 display,position,flat 속성의 상관관계-elm 200의 일기
http://d.hatena.ne.jp/elm200/20080201/1201874740
+
이렇게 말하면 jQuery의show()인데 이것은 블록 요소에 대한 행위와
내연 원소에 대한 행위는 약간 다르다.
만날 때?그거 알아요?(o・ω・o)
2017/12/16
jQuery 버전에 따라 다음과 같은 동작이 다르다
"규격을 알고 나서 사용하는 것이 좋다show()와hide()."
이것은 어떤 판본도 바뀌지 않을 것이다.
다음 실험(?)를 참고하십시오.
우선 블록 요소<div>와 내연 요소<span>를 준비한다.

이거 숨기고 다시 보여줘.
키득키득
jQuery

$("div").hide().show();
$("span").hide().show();

<div>원소는 display: block;원소가 있고, <span>원소는 display: inline;원소가 있다.
이(가) 추가되었습니다.
비록 jQuery의hide()는 CSS에서display: none;show()의 사람은 대상의 요소에 따라 두 가지 작용을 한다.
그럼 이쪽은 어때?
준비position: absolute;와position: relative;의<span>요소.

키득키득
jQuery

$("span").hide().show();

있어요?<span>하지만show()해도 display: inline;되지 않잖아!
이렇게 생각했나?(＠・ε・＠)《나의 청춘기계》
제이큐리 때문이 아니야.<span> 하지만 hide() 하기 전부터 블로킹 요소가 되었다.show()의 규범으로 블록 요소는 블록 요소를 포함한다.
내연 요소는 내연 요소로 원상을 잘 회복할 수 있다.
왜 블록 요소가 되었는지는 포지션의 지정이 있기 때문이다!
디스플레이 설정은position 설정에 끌립니다.
position이 absolute일 때 디스플레이는 말할 것도 없고 flat 같은 설정도 소용없다.
flat가 없는 블록 요소가 강제로 된다.
포지션이relative나static일 때만 디스플레이를 자유롭게 바꿀 수 있습니다.
(display:fixed;의 경우도 display:absolute;와 같다.)
처음 코드가 틀렸다는 얘기다.
HTML

<span style="position: absolute;">
    <label style="position: relative;">メールアドレス</label>
</span>

정확히 그렇습니다.
HTML

    <label style="position: absolute;">メールアドレス</label>

이상입니다.
그럼, 일로 돌아가자.