Création d’éléments ayant une position absolue dans les pages OneNoteCreate absolute positioned elements in OneNote pages

Le corps d’une page OneNote peut contenir plusieurs éléments enfants div, img et object directs qui peuvent être insérés séparément sur la page.The body of a OneNote page can contain multiple direct div, img, and object child elements that can be positioned independently on the page.

Attributs et comportement de positionnementAttributes and positioning behavior

Utilisez les attributs data-absolute-enabled et style pour créer des éléments ayant une position absolue sur une page, en suivant ces instructions :Use the data-absolute-enabled and style attributes to create absolute positioned elements on a page, as follows:

  • L’élément body doit spécifier data-absolute-enabled="true".The body element must specify data-absolute-enabled="true". S’il est omis ou défini sur false, tout le contenu du corps est restitué dans un élément div _default à position absolue créé par l’API, et tous les paramètres de position sont ignorés.If omitted or set to false, all body content is rendered inside a _default absolute positioned div that the API creates, and all position settings are ignored.

  • Seuls les éléments div, img et object peuvent avoir une position absolue.Only div, img, and object elements can be absolute positioned elements.

  • Les éléments ayant une position absolue doivent spécifier style="position:absolute".Absolute positioned elements must specify style="position:absolute".

  • Les éléments ayant une position absolue doivent être des enfants directs de l’élément body.Absolute positioned elements must be direct children of the body element. Les enfants directs du corps qui ne sont pas des éléments div, img ou object ayant une position absolue sont restitués de la même manière que du contenu statique, à l’intérieur de l’élément div _default à position absolue.Any direct children of the body that aren't absolute positioned div, img, or object elements are rendered as static content inside the absolute positioned _default div.

  • Les éléments ayant une position absolue sont positionnés selon leurs coordonnées par rapport aux bords supérieur et gauche, à partir de la position de départ 0:0 située dans le coin supérieur gauche de la page, au-dessus de la zone de titre.Absolute positioned elements are positioned at their specified top and left coordinates, relative to the 0:0 starting position at the top, left corner of the page above the title area.

  • Si un élément ayant une position absolue omet les coordonnées par rapport aux bords supérieur ou gauche, les coordonnées manquantes sont définies sur sa valeur par défaut : top:120px ou left:48px.If an absolute positioned element omits the top or left coordinate, the missing coordinate is set to its default value: top:120px or left:48px. Ces coordonnées par défaut indiquent une position située juste en dessous de la zone de titre.These default coordinates specify a position just below the title area. Sachez que l’omission des coordonnées peut entraîner l’empilage des éléments les uns sur les autres.Be aware that omitting coordinates can result in elements that are stacked on top of each other.

  • Les éléments ayant une position absolue ne peuvent pas être imbriqués ou contenir des éléments positionnés.Absolute positioned elements cannot be nested or contain positioned elements. L’API ignore tous les paramètres de position spécifiés sur les éléments imbriqués dans un élément div ayant une position absolue, restitue le contenu imbriqué dans l’élément div parent ayant une position absolue et envoie un avertissement dans la propriété api.diagnostics de la réponse.The API ignores any position settings specified on nested elements inside an absolute positioned div, renders the nested content inside the absolute positioned parent div, and returns a warning in the api.diagnostics property in the response.

ExempleExample

L’exemple suivant contient un élément enfant p direct, un élément div ayant une position absolue et un élément div ayant une position non absolue.The following example contains a direct p child, an absolute positioned div, and a non-absolute positioned div.

Code HTML d’entréeInput HTML

<body data-absolute-enabled="true">
    <p>This content will appear in the _default div.</p>
    <div style="position:absolute;top:175px;left:100px" data-id="div1">
      <p>This content will appear in an absolute positioned div.</p>
    </div>
    <div>
        <p>This content will also appear in the _default div.</p>
    </div>
</body>

L’API restitue l’élément div ayant une position non absolue dans l’élément div par défaut.The API renders the non-absolute positioned div in the default div. Les balises <div> imbriquées sont ignorées, car elles ne définissent aucune information sémantique (par exemple, data-id).Note that the nested <div> tags are discarded because they do not define any semantic information (such as data-id).

Code HTML de sortieOutput HTML

<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
    <div data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
        <p>This content will appear in the _default div.</p>
        <p>This content will also appear in the _default div.</p>
    </div>
    <div data-id="div1" style="position:absolute;left:99px;top:174px;width:624px">
        <p>This content will appear in an absolute positioned div.</p>
    </div>
</body>

ExempleExample

Dans l’exemple suivant, la page créée contient un élément div et une image ayant tous deux une position absolue.The following example creates a page that contains one absolute positioned div and one absolute positioned image.

Code HTML d’entréeInput HTML

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true">
        <div style="position:absolute;width:280px;top:120px;left:68px">
            <p>Some text</p>
            <img style="width:120px" src="https://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
            <div>
                <p>More text inside a regular, nested div</p>
            </div>
        </div>
        <img style="position:absolute;width:360px;top:350px;left:300px" src="https://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
    </body>
</html>

L’API OneNote évalue le code HTML d’entrée et conserve tout le contenu sémantique et toutes les informations structurelles pris en charge par OneNote.The OneNote API evaluates the input HTML and preserves all semantic content and any structural information that is supported by OneNote. La page obtenue affiche les éléments illustrés dans l’image suivante (sans les bordures visibles de l’élément div et de l’image).The resulting page renders as shown in the following image (but without the visible borders for the div and image).

Page obtenue avec l’élément div et l’image ayant une position absolue

Notez les modifications apportées à l’élément div imbriqué non contributif par le code HTML d’entrée.Notice the changes to the non-contributing, nested div from the input HTML. L’API préserve le contenu de l’élément div mais ignore les balises <div>, car l’élément div ne définit pas les informations sémantiques (par exemple, data-id).The API preserves the div's content but discards the <div> tags because the div doesn't define semantic information (such as data-id).

Pour en savoir plus sur la gestion des codes HTML d’entrée et de sortie par l’API OneNote, consultez l’article Code HTML d’entrée et de sortie pour les pages OneNote.For more information about how the OneNote API handles input and output HTML, see Input and output HTML for OneNote pages.

Attributs de style CSS pris en chargeSupported CSS style attributes

Tous les éléments ayant une position absolue peuvent spécifier les positions supérieure et gauche.All absolute positioned elements can specify top and left positions. Les éléments div peuvent spécifier la largeur, et les images peuvent spécifier la largeur et la hauteur.Divs and images can specify width, and images can also specify height. Par exemple :For example:

<img style="position:absolute;top:140px;left:95px;width:480px;height:665px" src="..." />
AttributAttribute Élément pris en chargeSupported element DescriptionDescription
toptop div, img, objetdiv, img, object Coordonnée sur l’axe Y de la bordure supérieure de l’élément, en pixels uniquement.The y-axis coordinate of the element's top border, in pixels only. Valeur par défaut : 120 pixels.Default is 120 pixels.

Exemple : top:140pxExample: top:140px
leftleft div, img, objetdiv, img, object Coordonnée sur l’axe X de la bordure gauche de l’élément, en pixels uniquement.The x-axis coordinate of the element's left border, in pixels only. Valeur par défaut : 48 pixels.Default is 48 pixels.

Exemple : left:95pxExample: left:95px
widthwidth div, imgdiv, img Largeur de l’élément, en pixels uniquement.The width of the element, in pixels only.

Exemple : width:480pxExample: width:480px
heightheight imgimg Hauteur de l’élément, en pixels uniquement.The height of the element, in pixels only. Pour les balises div, la hauteur est calculée pendant l’exécution et les valeurs spécifiées sont ignorées.For divs, height is calculated at runtime and any specified height value is ignored.

Exemple : height:665pxExample: height:665px

Les autres attributs de position, tels que z-index, sont ignorés.Other position attributes, such as z-index, are ignored. Les images ayant une position absolue peuvent utiliser l’attribut data-render-src ou src.Absolute positioned images can use either the data-render-src or src attribute.

Informations de la réponseResponse information

L’API OneNote renvoie les informations suivantes dans la réponse.The OneNote API returns the following information in the response.

Données de réponseResponse data DescriptionDescription
Code de succèsSuccess code Code d’état HTTP 201 pour une requête POST réussie et code d’état HTTP 204 pour une requête PATCH réussie.A 201 HTTP status code for a successful POST request, and a 204 HTTP status code for a successful PATCH request.
ErreursErrors Consultez l’article Codes d’erreur pour les API OneNote dans Microsoft Graph pour en savoir plus sur les erreurs OneNote renvoyées par Microsoft Graph.Read Error codes for OneNote APIs in Microsoft Graph to learn about OneNote errors that Microsoft Graph can return.

AutorisationsPermissions

Pour créer ou mettre à jour des pages OneNote, demandez les autorisations appropriées.To create or update OneNote pages, you'll need to request appropriate permissions. Choisissez le niveau d’autorisation le plus faible requis par votre application pour faire son travail.Choose the lowest level of permissions that your app needs to do its work.

Autorisations pour les pages POSTPermissions for POST pages

  • Notes.CreateNotes.Create
  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

Autorisations pour les pages PATCHPermissions for PATCH pages

  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

Pour en savoir plus sur les étendues d’autorisation et leur fonctionnement, consultez la section relative aux étendues d’autorisation dans OneNote.For more information about permission scopes and how they work, see OneNote permission scopes.

Voir aussiSee also